Change Text Color with Javascript at more that one part in single page.
Below code is the modified version of the topic name Change Text Color with Javascript as one of the reader demands. Copy and paste the code in notepad and save it as any name with .html extension and run in browser.
Logic behind to use the same feature in different parts of the page is by using class instead of id. Id is unique and cannot be used more than once but class can be used more than once to group the feature. The previous code uses ID and this one use Class on div.
Logic behind to use the same feature in different parts of the page is by using class instead of id. Id is unique and cannot be used more than once but class can be used more than once to group the feature. The previous code uses ID and this one use Class on div.
<html>
<head>
<title>Text Color Change</title>
<script type="text/javascript" language="javascript">
elmColor = 0;
function changeColor(elmColor) {
for (i = 0; i < document.getElementsByClassName('colorChange').length;
i++) {
switch (elmColor) {
case 0:
document.getElementsByClassName('colorChange')[i].style.color = '#000000';
elmColor++;
break;
case 1:
document.getElementsByClassName('colorChange')[i].style.color = '#ff0000';
elmColor++;
break;
case 2:
document.getElementsByClassName('colorChange')[i].style.color
= '#00ff00';
elmColor++;
break;
case 3:
document.getElementsByClassName('colorChange')[i].style.color = '#0000ff';
elmColor++;
break;
case 4:
document.getElementsByClassName('colorChange')[i].style.color = '#0688ad';
elmColor++;
break;
case 5:
document.getElementsByClassName('colorChange')[i].style.color = '#2f6202';
elmColor++;
break;
case 6:
document.getElementsByClassName('colorChange')[i].style.color
= '#c26a14';
elmColor++;
break;
case 7:
document.getElementsByClassName('colorChange')[i].style.color = '#cf013b';
elmColor = 0;
break;
default:
break;
}
}
setTimeout(function () {
changeColor(elmColor); }, 700);
}
window.onload = function () {
changeColor(elmColor); };
</script>
</head>
<body>
<div style="width: 70%; margin: 0 auto; font-family: Verdana; font-size: 20px; font-weight: bold;" class="colorChange">
Hello....
<br>
<br>
I am changing my text color with the
help of Javascript.....
<br>
<br>
Thankyou Javascript.......... :)
</div>
<br />
<br />
<div style="width: 70%; margin: 0 auto; font-family: Verdana; font-size: 20px; font-weight: bold;" class="colorChange">
Another div with text changing
effect...
Hello....
<br>
<br>
I am changing my text color with the
help of Javascript.....
<br>
<br>
Thankyou Javascript.......... :)
</div>
<br />
<br />
<div style="width: 70%; margin: 0 auto; font-family: Verdana; font-size: 20px; font-weight: bold;" class="colorChange">
Third div with text changing effect...
Hello....
<br>
<br>
I am changing my text color with the
help of Javascript.....
<br>
<br>
Thankyou Javascript.......... :)
</div>
</body>
</html>
Comments
Post a Comment