getPropertyValue

In this chapter you will learn:

  1. Explores CSS Properties

Explores Properties

<!DOCTYPE HTML><!--from  j ava2 s  .com-->
<html>
<head>
<style title="core styles">
p {
  color: white;
  background-color: gray;
  padding: 5px;
}

</style>
</head>
<body>
  <p id="block1">
     This is a test.  
  </p>
  <div id="placeholder"></div>
  <script>
    var placeholder = document.getElementById("placeholder");
    displayStyles();
    function displayStyles() {
      var newElem = document.createElement("pre");
      newElem.setAttribute("border", "1");
      var style = document.styleSheets[0].cssRules[0].style;
      for ( var i = 0; i < style.length; i++) {
        newElem.innerHTML+=style[i]+" "+style.getPropertyValue(style[i]);
      }
      placeholder.appendChild(newElem);
    }
  </script>
</body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. How to get property CSS value
Home » Javascript Tutorial » CSS
CSSStyleDeclaration Objects
border
padding
cssText
color
getComputedStyle
getPropertyValue
getPropertyCSSValue
getPropertyPriority