Getting and Setting Styles



Setting the style attribute of a HTML markup can change the style of the element. For example:
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="message"
             style="color: #ffffff; background-color: #ff0000; width: 500px; height: 200px; padding-left: 250px; padding-top: 150px;">
        This is a message.</div>
    </body>
</html>

Using JavaScript to set the properties of the style element can achieve the same effect. For example: 
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <script type="text/javascript">
            window.onload = function() {
                var message = document.getElementById('message');
                message.style.color = '#ffffff';
                message.style.backgroundColor = '#ff0000';
                message.style.width = '500px';
                message.style.height = '200px';
                message.style.paddingLeft = '250px';
                message.style.paddingTop = '150px';
            };
        </script>
    </head>
    <body>
        <div id="message">This is a message.</div>
    </body>
</html>

The style property refers to a CSSProperties instance. Case-sensitive should be cared. In general, they have not dashes and are camel-case. Generally, using the style attribute of a markup to set the element's style is not recommended. The style tag is used to define the style information for an HTML document. For example:
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <style type="text/css">
            #message {
                color: #ffffff;
                background-color: #ff0000;
                width: 500px;
                height: 200px;
                padding-left: 250px;
                padding-top: 150px;
            }
        </style>
    </head>
    <body>
        <div id="message">This is a message.</div>
    </body>
</html>

This case, however, can't use the style property to get the style information. This is because that, the style property corresponds to the style attribute of the markup. If the markup doesn't define the style attribute, or the script doesn't set the style property, the style property contains no style information. Setting the style attribute of a markup or the style property of an element will override the information defined in the stylesheets. Because setting the style attribute of the markup isn't recommended, using the style property to set the style information is recommended rather than using it to get the style information.

If the markup doesn't have a style attribute and you want to get the element's style information, you should use the element's computed style. The computed style of an element incorporates stylesheets, the style attribute and the style property prescribed via JavaScript.

Standards-compliant browsers use the window.getComputedStyle function, referring to the same function as document.defaultView.getComputedStyle, to return the computed style. It returns a read-only CSS2Properties instance. Just as the style property, you can use a property name or give the getPropertyValue function a CSS attribute to get the style information. In Internet Explorer, you can use the currentStyle of an element to get the computed style.

The following is a simple encapsulation for getting the computed style:
function style(obj, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(obj, null)[prop];
    }
    else if(obj.currentStyle) {
        return obj.currentStyle[prop];
    }
    else {
        return null;
    }
}

The second parameter of the getComputedStyle function accepts a pseudo-class. It should be given a null if you don't have one.

The style information has cross-browser problems. Take the simplest color information for example, the following example shows the RGB format in Firefox, but the #HEX format in Internet Explorer. 
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <style type="text/css">
            #message {
                color: #ffffff;
                background-color: #ff0000;
                width: 500px;
                height: 200px;
                padding-left: 250px;
                padding-top: 150px;
            }
        </style>
        
        <script type="text/javascript">
            window.onload = function() {
                function style(obj, prop) {
                    if(window.getComputedStyle) {
                        return window.getComputedStyle(obj, null)[prop];
                    }
                    else if(obj.currentStyle) {
                        return obj.currentStyle[prop];
                    }
                    else {
                        return null;
                    }
                }
                var color = style(
                      document.getElementById('message'), 'backgroundColor');
                document.getElementById('console').innerHTML = color;
            };
        </script>
    </head>
    <body>
        <div id="message">This is a message.</div>
        <span id="console"></span>
    </body>
</html>