How to Change the Style Class With JavaScript

The style class for objects on your Web pages is used to change colors, visibility and font attributes. You can change the styles using JavaScript code in your Web page layout. This makes your layout dynamic for users. The style class is beneficial for menus, forms and other parts of a Web page that need quick changes after user input. Since JavaScript is run on the client's Web browser, it's faster and doesn't require the user to wait for a new page to load.

Instructions

1. Create a script block in your Web page. All JavaScript code should be contained within a script block, so the Web browser knows that the code should be executed. The code below creates a script block:
   <script type="text/javascript"> </script>

2. Create an element on your Web page. Most elements of a Web page have the style class available, so you can change its format. For this example, a text box is created in the code below:
   <input type="text" id="myTextbox">

3. Add the JavaScript code to change the style of the element. There are several styles available. In this example, JavaScript is used to set the visibility of the element to "hidden." The code to do this is below:
   document.getElementById("myTextBox").style[visibility] = "hidden";

Tips & Warnings

• The resource link below contains a list of styles available for JavaScript dynamic scripts.

References

• DHTML Kitchen: Setting Styles

Resources

• CompTech: Javascript Styles