Javascript DOM CSS Style Sheet Read

Description

Javascript DOM CSS Style Sheet Read

View in separate window 


<!DOCTYPE html>

<html>
<head>
   <title>Modifying the Output Stream</title>
   <style type="text/css">
      h1 {color: red;font-style: italic;text-align: center;}
      p {color: blue;font-family: cursive;}
   </style>
</head>//from   w  w w.jav  a  2  s.c  om
<body>
   <h1>Modifying the Output Stream</h1>
   <p id="demo"></p>
   <script language="JavaScript">
      var Sheets = document.styleSheets[0];
      var Rules = Sheets.cssRules;
      for (var i = 0; i < Rules.length; i++)
      {
         var Rule = Rules[i];
         document.getElementById("demo").innerHTML +="<br>"+ Rule.selectorText;
         // Obtain a list of styles for the rule.
         var Styles = Rule.style;
         
         // Display each of the styles on screen.
         for (var j=0; j < Styles.length; j++)
         {
            // Obtain the name of a property.
            var PropertyName = Styles[j];
            
            // Use the property name to locate its value
            // and display both name and value.
            document.getElementById("demo").innerHTML +=PropertyName + " : " + Styles.getPropertyValue(PropertyName) +
               "<br />";
         }
      }
   </script>
</body>
</html>



PreviousNext

Related