How to Change a CSS Class Attribute With Javascript
Changing the class attribute of an HTML element using JavaScript allows developers to create interactive effects within websites. Using a JavaScript function, you can determine what behavior should take place when users interact with your page elements, altering their CSS style properties in response to this interaction. Altering class attribute names is one of the key techniques involved in this task, which is achievable even for people just starting in Web development.
Other People Are Reading
Instructions
-
-
1
Create your HTML page with elements to display the content. Open a new file in a text editor and save it with ".html" as the extension, entering the following code:
<html>
<head>
</head>
<body>
<div class="off">Hello</div>
</body>
</html>
This simply creates a Web page with a single HTML element in it. The element has been assigned a class attribute with the name "off." This indicates the state of the element when the user does not have his mouse cursor over it.
-
2
Create your CSS code. Open a new file in a text editor and save it as "interactivestyle.css" to reflect the purpose of the task being carried out. Enter the following code:
.off {
color:#FF0000;}
.over {
color:#0000FF;}
Add a link to your CSS file in the head section of your HTML page, between the opening and closing head tags:
<link rel="stylesheet" type="text/css" href="interactivestyle.css" />
-
-
3
Create two JavaScript functions in the head section of your page, either before or after the link to your CSS file:
<script type="text/javascript">
function overElement(elemRef){
//mouse is over the element
}
function offElement(elemRef){
//mouse is off the element
}
</script>
Your page is going to alter the style of the element when the user moves her mouse on and off it. A separate function is required to process each of these user events.
-
4
Locate the elements within your JavaScript functions and change their class name attributes. Alter your two JavaScript functions as follows:
function overElement(elemRef){
//mouse is over the element
document.getElementById(elemRef).className="over";
}
function offElement(elemRef){
//mouse is off the element
document.getElementById(elemRef).className="off";
}
This code in each function first locates the element in question using its ID attribute which has been passed as a parameter, then alters the class name accordingly.
-
5
Call your functions within your HTML content. Your page has to "listen" for user interaction, calling the JavaScript functions when this occurs. Alter your HTML element as follows:
<div class="off" id="intelem" onmouseover="overElement(this.id)" onmouseout="offElement(this.id)">Hello</div>
This assigns an ID attribute to the element, passing it to each function when the user moves his mouse on or off the area. Save your files and open the HTML page in a Web browser, moving your mouse on and off the element to test the functionality.
-
1
Tips & Warnings
You can include any CSS properties you like for when the user moves her mouse on and off your elements.
JavaScript functions sometimes behave unpredictably in certain browsers, so testing is vital.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
