O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

12.15. Changing the Element’s CSS Style Properties

Problem

You want to modify one or more CSS properties for an element.

Solution

If you’re only modifying a single property, you can change the CSS setting directly using the element’s style property:

var elem = document.getElementById("elem");
elem.style.width = "500px";

If you’re modifying one or more values, you can use the element’s setAttribute method:

elem.setAttribute("style","width: 500px; background-color: yellow;");

Discussion

An element’s CSS properties can be modified in JavaScript using one of two approaches. As the solution demonstrates, the simplest approach is to set the property’s value directly using the element’s style property:

elem.style.width = "500px";

If the CSS property contains a hyphen, such as font-family or background-color, use a CamelCase notation for the property:

elem.style.fontFamily = "Courier";
elem.style.backgroundColor = "rgb(255,0,0)";

You can also use the element’s setAttribute method to set the style property:

elem.setAttribute("style","font-family: Courier; background-color: yellow");

However, when you set the style property using setAttribute, it erases any previously set values in the JavaScript.

Example 12-7 demonstrates how the style-setting techniques work, including the impact of using setAttribute. Various techniques are used to set and get style attributes, including a cross-browser approach to access the computed style for the attribute.

Example 12-7. Demonstrating setting and retrieving CSS style settings

<!DOCTYPE html>
<head>
<title>Changing style</title>
<meta charset="utf-8" />
<style>
#elem
{
  width: 200px; background-color: lime;
}
</style>
<script type="text/javascript">


function getStyle(elem, cssprop, cssprop2){

 // IE
 if (elem.currentStyle) {
   return elem.currentStyle[cssprop];

 // other browsers
 } else if (document.defaultView &&
                   document.defaultView.getComputedStyle) {
   return document.defaultView.getComputedStyle(elem,
null).getPropertyValue(cssprop2);

 // fallback
 } else {
   return null;
 }
}
window.onload=function() {

   // setting and accessing style properties
   var elem = document.getElementById("elem");

   var color = getStyle(elem,"backgroundColor", "background-color");
   alert(color); // rgb(0,255,0)

   elem.style.width = "500px";
   elem.style.backgroundColor="yellow";

   alert(elem.style.width); // 500px
   alert(elem.style.backgroundColor); // yellow

   // array notation
   elem.style["fontFamily"] = "Courier";

   // demonstrating overwriting properties
   var style = elem.getAttribute("style");
   alert(style); // should display color: purple; width: 500px;
                 // background-color: yellow;

   elem.setAttribute("style","height: 100px");
   var style = elem.getAttribute("style");
   alert(style); // now only displays height, resets styles

   var font = getStyle(elem,"fontFamily", "font-family");
   alert(font); // default font family

}
</script>
</head>
<body>
<div id="elem" style="color: purple">
testing
</div>
</body>

As soon as the page loads, the div element is accessed using getElementById, and its background-color is retrieved using a cross-browser function that gets the computed style for the attribute. The message output is “rgb(0,255,0)”, representing the lime color set in the page’s stylesheet.

Next, two CSS properties are set using the element’s style property: the width and background-color. Now the div element has a yellow background and is 500, rather than 200, pixels wide. Both of the modified values are accessed and printed out, so we can confirm that yes, the values have changed.

Next, the font-family for the element is set to Courier, using the array notation, which is another approach you can use to set and get style property values. Now the div element is 500 pixels wide, with a yellow background, and its font family is Courier.

The style property is accessed using getAttribute. A string of the values set using the style property is returned for all browsers:

color: purple; width: 500px; background-color: yellow;
font-family: Courier;

The purple font color is set inline within a style attribute in the div element.

Next, I’m using the setAttribute method to change the element’s height. A couple of things happen when I used the setAttribute method in the example. The height of the element is changed to 100 pixels, but the previously set style properties (color, width, background-color, and font-family) have been “erased,” and revert back to the original settings in the stylesheet, or the defaults by the user agent. The element is now 200 pixels wide, 100 pixels tall, with a green background, and the font reverts back to the default font for the browser (typically a serif value), and the default font color, black.

As you can see, using setAttribute to change the style element property can significantly impact on previous settings, including any inline CSS settings. You should only use setAttribute if you’re changing many values at once, and you don’t use any inline style attributes or haven’t modified the element’s style settings previously in your application.

The effects demonstrated in this recipe work the same with all of the book’s target browsers, except for IE7. The style property is an actual object in IE7, so when you access style with getAttribute, you’ll get an object, not a string. Since it is an object, it’s read only, which means you can’t use setAttribute with IE7.

See Also

See Recipe 11.13 for more information about accessing the computed style for an element.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required