javascriptcss20250313.html


<html>
<head><title>javascriptcss20250313.html</title></head>
<body>
<style>
.div001 {
    width: 20%;
    background-color: pink;
    color: white;
    float: left;
    margin: 5%;
}
.button001 {
    width: 5%;
    background-color: yellow;
}
</style>

<script>
var width001 = 300;
function div001widthadd () {
    document.getElementById ("id001div").style.width = width001.toString () + "px";
    width001 += 100;
}
function div001colorrotate () {
    document.getElementById ("id001div").style.color = "black";
}
function div001textContentrotate () {
    var i = 1;
    var j;

    var textContent1 = document.getElementById ("id001div").textContent;
    document.getElementById ("id001div").textContent = document.getElementById ("id006div").textContent;
    for (i = 1; i < 6;  i++) {
        j = i + 1;
        var textContent2 = document.getElementById ("id00" + (i+1).toString () + "div").textContent;
        document.getElementById ("id00" + (i+1).toString () + "div").textContent = textContent1;
        textContent1 = textContent2;
    }

}
</script>

<input class="button001" type="button" onclick="div001colorrotate();">
<input class="button001" type="button" onclick="div001widthadd();">
<input class="button001" type="button" onclick="div001textContentrotate();">

<div class="div001" id="id001div">
Hallo dies ist ein Text, Hallo dies ist ein Text, Hallo dies ist ein Text, Hallo dies ist ein Text, Hallo dies ist ein Text, Hallo dies ist ein Text,
</div>

<div class="div001" id="id002div">
Hallo, dies ist DIV 2 ... 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,2, 2, 2, 2, 2, 2,
</div>

<div class="div001" id="id003div">
Hallo, dies ist DIV 3333333333333333333333333333333333333333333333333333333333
</div>

<div class="div001" id="id004div">
Hallo, dies ist 4444444444444444444444444444444444444444444444444444444444444444444
</div>

<div class="div001" id="id005div">
Hallo, dies ist DIV 555555555555555555555555555555555555555555555555555555555555555555555
</div>

<div class="div001" id="id006div">
Hallo, dies ist DIV 666666666666666666666666666666666666666666666666666666666
</div>

</body>
</html>