professional_javascript_for_web/ch12/CSSRulesExample.htm

<!DOCTYPE html>
<html>
<head>
    <title>CSS Rules Example</title>
    <style type="text/css">
        div.box {
            background-color: blue;
            width: 100px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
    
        function getStyleInfo(){
            var sheet = document.styleSheets[0];
            var rules = sheet.cssRules || sheet.rules;
            var rule = rules[0];
            alert(rule.selectorText);
            alert(rule.style.cssText);
            alert(rule.style.backgroundColor);
            alert(rule.style.width);
            alert(rule.style.height);
        }
        
        function changeStyleInfo(){        
            var sheet = document.styleSheets[0];
            var rules = sheet.cssRules || sheet.rules;
            var rule = rules[0];    

            rule.style.backgroundColor = "red";
        }

    </script>
</head>
<body>
    <div class="box" style="margin-bottom: 10px"></div>
    <div class="box"></div>
    <input type="button" value="Get Style Info" onclick="getStyleInfo()">
    <input type="button" value="Change Style Info" onclick="changeStyleInfo()">
    
    
</body>
</html>