Javascript Change Style Class of Div tag

by top54u.com 25 Jun, 2008

Inside DHTML Tutorials | HTML Tutorials | JavaScript Tutorials | DOM Tutorials

HTML Div CSS Clear Style

Javascript Code to Change Div Object innerHTML

HTML Div Tag Overflow CSS Style Scrollbars

What is Div Tag in Html

HTML Nested Div Positioning Using CSS Position Styles

Javascript Create New Div HTML Element Dynamically

HTML Div CSS Style Float

Javascript Document Object Modeling provides the functionality to change the CSS style class name of the HTML div tag dynamically. Javascript change style class of Div tag function allows you to sets the new class name of the class attribute of Div tag dynamically. You can access the HTML div element using document.getElementById method to change the CSS classname property of the Div tag.

Example of Javascript Change Style Class of Div tag

<html>

<head>

<title>Javascript Change Style Class of Div tag</title>

.redText {color : red} .blueText {color : blue}

</style>

function changeCssClass(objDivID)

{

if(document.getElementById(objDivID).className=='redText')

{

document.getElementById(objDivID).className = 'blueText';

}

else

{

document.getElementById(objDivID).className = 'redText';

}

</script> </head> <body>

By default text indside this HTML div tag is red.

Javascript function will change the CSS class<br />

of this Div tag and <br />

text color will change to blue dynamically.

</div> <input type="button" value="click here" onclick="changeCssClass('div1')" /> </body>

</html>

Above Javascript DOM example changes the class of HTML div tag onclick event of input button control of HTML. Javascript changeCssClass function takes the parameter as id of the div tag whose style class is to be changed. It performs the toggle function to change the class of Div tag and reverts back to the default class name when user clicks the button second time. You can embed the CSS style code inside the Head section of the HTML document using HTML style tag as shown in the above sample code.

Spotlight.....

Currently rated 4.0 by 1 people