<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> |