getPropertyPriority

In this chapter you will learn:

  1. Gets Style Property Importance

Important Property

When working with the CSSStyleDeclaration object, you can use the getPropertyPriority method to see if !important has been applied to a property.

<!DOCTYPE HTML><!--from j ava 2s .  c  om-->
<html>
<head>
<style title="core styles">
p {
  color: white;
  background-color: gray !important;
  padding: 5px !important;
}
</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.getPropertyPriority(style[i])+" ";
      }
      placeholder.appendChild(newElem);
    }
  </script>
</body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. Working with CSSStyleSheet through Javascript
Home » Javascript Tutorial » CSS
CSSStyleDeclaration Objects
border
padding
cssText
color
getComputedStyle
getPropertyValue
getPropertyCSSValue
getPropertyPriority