To modify single property:
Change the CSS setting directly using the element's style property:
var elem = document.getElementById("elem");elem.style.width = "500px";
To modify one or more values:
Use the element’s setAttribute method:
elem.setAttribute("style","width: 500px; background-color: yellow;");An element’s CSS properties can be modified in Javascript using one of two approaches.
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: setting and retrieving CSS style settings
It 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.
<!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.
No comments:
Post a Comment
Any Suggeston or Query ?