JavaScript scripting CSS stylesheets

When using the JavaScript scripting operations CSS style sheet, you must use two objects:

　　1，Elements of the object: i.e. <link> element and <style> element。

　　2，CSSStyleSheet objects: document associated with the current style sheet together, by obtaining document.styleSheets, the object class is read array object (by theAn array of objects of class CSSStyleSheet）。

　　Note: title property by adding the <link> and <style> element, title attributes CSSStyleSheet such objects may be returned corresponding up.

Opening and closing style sheet:

Each object has a disabled CSSStyleSheet property can be used to query whether the use of style sheets, indicating that the style sheet in use false, it means that the browser is closed ignore the stylesheet is true, therefore, can be disabled by setting the property to true to shut down the specified style sheet application.

.box{
            width:600px;
            height:600px;
            border:3px solid black;
        }
        .box2{
            width:300px;
            height:300px;
            border:2px solid red;
        }
        .box3{
            width:100px;
            height:100px;
            border:1px solid skyblue;
        }

<body>
      <div class="box" style="margin:20px;position: relative;">
          <div class="box2" style="position: absolute;padding: 20px;">
              <div class="box3" style="-webkit-clip:rect(0px 50px 50px 50px);background-color: skyblue"></div>6666666
          </div>
      </div>

      <button onclick="test()">cancel</button>
  </body>

function test(){
          document.styleSheets[0].disabled = true;
       }

Before clicking the Cancel button:

Click Cancel button:

Other operating style sheet:

document.styleSheets CSSStyleSheet array of objects in the API standard, each object has a cssRules CSSStyleSheet array (CSSStyleRule of objects), it contains all the rules of style sheet (IE for rules).

Rules can be edited directly in the style attribute.

API standard also defines insertRule () and deleteRule () method to add and delete rules.

Add a rule:document.styleSheets[0].insertRule("h1{border:1px solid red;}",0);

To delete a rule:document.styleSheets [0] .deleteRule (subscript CSSStyleRule array to be deleted);

　　IE does not support these two methods, it has its own implementation: addRule (), removeRulr (). The only difference is that the parameters and the method of standard API addRule the selector text and text styles are passed as parameters.

Intelligent Recommendation

css- using css stylesheets 3 ways

[size = large] [b] 3 ways using css stylesheet [/ b] [/ size] 1. Embedded stylesheet 2. Link Style Sheets 3. introducing Stylesheet...

CSS Basics Introduction - defined by CSS stylesheets

1. CSS definitions unordered list of small attack Alignment for unordered list Description Table parameter Explanation disc Solid round circle Hollow circle square Solid squares none no ...

How to load CSS stylesheets only on IE

Foreword: IE has always been a special browser, we can use some methods to specify that the style sheet is only loaded under IE browser. IE9 and lower than IE9 version: Conditional comment statements ...

Conditional Stylesheets vs CSS Hacks? Answer: Neither!

…or… <html>’s conditional classes From what I’ve seen a good number of developers these days are split between conditional stylesheets and css hacks. You’re ...

About Myeclipse is not recognized (read) part of css stylesheets

Two days before going to write big job, and then spend the semester to write the code found invalid css import (import from external Myeclipse), examined the path, encoding, etc. will not work, I even...