CSSStyleSheet.disabled

In this chapter you will learn:

  1. How to disable CSS Style in Javascript

Disabling Stylesheets

The CSSStyleSheet.disabled property lets you enable and disable all of the styles in a stylesheet.

<!DOCTYPE HTML><!-- j  a  v  a2 s . c  o  m-->
<html>
<head>
<style title="core styles">
p {
  border: medium double black;
  background-color: lightgray;
}

#block1 {
  color: white;
  border: thick solid black;
  background-color: gray;
}
</style>
</head>
<body>
  <p id="block1">
  This is a test. 
  </p>
  <div>
    <button id="pressme">Press Me</button>
  </div>
  <script>
    document.getElementById("pressme").onclick = function() {
      document.styleSheets[0].disabled = !document.styleSheets[0].disabled;
    }
  </script>
</body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. How to use CSSRuleList in Javascript
Home » Javascript Tutorial » CSS Style Sheet
CSSStyleSheet
Media Constraints
CSSStyleSheet.disabled
CSSRuleList
CSSRuleList.item
Set property