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