JavaScript/Changing Element Styles
Previous: Removing elements Index Next: Event handling

In order to change a style property of an element, change the value associated with the property under the "style" argument of the element. Let's continue with our button example from the last section:

<input type="button" id="myButton" value="I'm a button!">

Suppose we wish to hide the button with the display style property. In CSS, this would be done with:

#myButton { display: none; }

If the button should be initially visible, but we want to hide it later with JavaScript, this would be done with:

myButton = document.getElementById("myButton"); //searches for & detects input element of 'myButton' id
myButton.style.display = "none"; //hides the element

Hyphenated styles

Some style properties are hyphenated. In such cases, the associated JavaScript property has no hyphens, but the letters that appear after the hyphens are capitalized. (This is known as "camel case".)

For example, suppose we want the text of the button to be bold. In CSS, this would be done with:

#myButton { font-weight: bold; }

If the button should initially be normal, but we want to make its text bold later with JavaScript, this would be done with:

myButton = document.getElementById("myButton"); //searches for & detects input element of 'myButton' id
myButton.style.fontWeight = "bold"; //makes the text bold


Previous: Removing elements Index Next: Event handling

  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.


JavaScript/Changing_element_styles
 

Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us  |  About IT1me.com |  IT Training & References |  IT Careers |  IT Hardware |  IT Software |  IT Books