JAVA SCRIPT - Setting an Element’s Style Attribute

 Setting an Element’s Style Attribute 

Problem

You want to add or replace a style setting on a specific web page element. 

Solution

To change one CSS property, modify the property value via the element’s style property:

elem.style.backgroundColor="red";

To modify one or more CSS properties for a single element, you can use setAttri bute() and create an entire CSS style rule:

elem.setAttribute("style",
 "background-color: red; color: white; border: 1px solid black");

Or you can predefine the style rule, assign it a class name, and set the class property for the element:

.stripe{
 background-color: red;
 color: white;
 border: 1px solid black;
}
...
elem.setAttribute("class", "stripe");

EXPLAIN 

An element’s CSS properties can be modified in JavaScript using one of three ap‐ proaches. 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 the CamelCase notation for the property

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

The CamelCase notation removes the dash, and capitalizes the first letter following the dash. You can also use setAttribute() to set the style property:

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

The setAttribute() method is a way of adding an attribute or replacing the value of an existing attribute for a web page element. The first argument to the method is the attribute name (automatically lowercased if the element is an HTML element), and the new attribute value.

When setting the style attribute, all CSS properties that are changed settings must be specified at the same time, as setting the attribute erases any previously set values. However, setting the style attribute using setAttribute() does not erase any settings made in a stylesheet, or set by default by the browser. A third approach to changing the style setting for the element is to modify the class attribute.

elem.setAttribute("class", "classname");

ADVANCE 

Rather than using setAttribute() to add or modify the attribute, you can create an attribute and attach it to the element using createAttribute() to create an Attr node, set its value using the nodeValue property, and then use setAttribute() to add the attribute to the element:

var styleAttr = document.createAttribute("style");
styleAttr.nodeValue = "background-color: red";
someElement.setAttribute(styleAttr);

You can add any number of attributes to an element using either createAttribute() and setAttribute(), or setAttribute() directly. Both approaches are equally efficient, so unless there’s a real need, you’ll most likely want to use the simpler approach of setting the attribute name and value directly using setAttribute().

When would you use createAttribute()? If the attribute value is going to be another entity reference, as is allowed with XML, you’ll need to use createAttribute() to create an Attr node, as setAttribute() only supports simple strings.

Accessing an Existing Style Setting

For the most part, accessing existing attribute values is as easy as setting them. Instead of using setAttribute(), use getAttribute():

var className = document.getElementById("elem1").getAttribute("class");

Getting access to a style setting, though, is much trickier, because a specific element’s style settings at any one time is a composite of all settings merged into a whole. This computed style for an element is what you’re most likely interested in when you want to see specific style settings for the element at any point in time.

Happily, there is a method for that: getComputedStyle(). Unhappily, older versions of IE (IE8 and older) don’t support the method. Instead, you have to use Microsoft’s currentStyle to access the computed style. In addition to having to having to use a different technique with older versions of IE, you also have to change the property name.

When accessing a CSS property using getComputedStyle(), you’ll use the CSS property name. However, with current Style.demonstrates one cross-browser ap‐ proach to getting an element’s background-color.

Getting a computed CSS property that works cross-browser

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>CSS Computed Style</title>
 <style>
 #test {
 background-color: red;
 width: 100px;
 height: 100px;
 }
 </style>
</head>
<body>
 <div id="test"><p>Hi</p></div>
 <script>
 var elem = document.getElementById("test");
 var bkcolor = elem.currentStyle ? elem.currentStyle['backgroundColor'] :
 window.getComputedStyle(elem).getPropertyValue("background-color");
 console.log(bkcolor);
 </script>
</body>
</html>