JS Read and Write CSS style method Rollup _javascript tips

In order to facilitate inquiries later, I have read some data summarized the following methods, only the original JS, if there is no place to welcome the point! We just have to see what we can learn.

A CSS style that can be read and written to document elements through a style object (that is, a Cssstyledeclaration object) of a DOM node object
such as:var elm = document.getElementById (' test ');
Elm.style.color = ' black ';

Second, through the element object GetAttribute (), setattribute (), removeattribute () directly read and write the Style property
such as:Elm.setattribute (' style ', ' color:red;line-height:30px ');

Three, through Cssstyledeclaration object's Csstext attribute and SetProperty (), Removeproperty and so on method
such as:

Elm.style.cssText = ' color:red;line-height:30px ';
Elm.style.removeProperty (' color ');
Elm.style.setProperty (' Color ', ' green ', ' important ');
Elm.style.cssText = '; Quickly empty all declarations for this rule

The style declaration portion of each CSS rule (the portion inside the brace) is a Cssstyledeclaration object, its properties and methods:
Property:
1.cssText: All style declaration text for the current rule. This property is read-write and can be used to set the current rule.
2.length: How many declarations the current rule contains.
3.parentRule: The rule that contains the current rule, the Parentrule property of the same Cssrule interface. The
Method:
1.getPropertyPriority () method returns the priority of the specified declaration, if any, "important", otherwise it is an empty string, and the
2.getPropertyValue method returns the value of the specified declaration; The
3.item (index) method returns the name of the property at the specified location, more directly than the [index] syntax;
The 4.removeProperty method deletes a CSS property and returns the deleted value;
5. The SetProperty method is used to set the specified CSS property with no return value;

four, using the Document.stylesheets property, returns all Stylesheet objects (that is, all style sheets) of the current page, which is a read-only class array object whose elements are Cssstylesheet objects (inherited from the Stylesheet object), the property method of the object is as follows:
Properties:
1.cssRules Class Array object, the element is a CSS rule Cssstylerule object in the style sheet; IE9 follows rules;
2. The Disabled property is used to open or close a style sheet with a value of true or disabled, and the
3.ownerNode property returns the DOM node of the Stylesheet object, usually <link> or <style>. For stylesheets that are referenced by other style sheets, this property is null;
4. Because the CSS @import command allows other style sheets to be loaded in the stylesheet, there is a Parentstylesheet property that returns the style sheet that includes the current style sheet. If the current style sheet is a top-level style sheet, the property returns null; the
5.type property returns the type value of the Stylesheet object, usually the TEXT/CSS
6.title property returns the title value of the Stylesheet object;
The 7.href property is a read-only property that returns the style sheet address for a Stylesheet object connection. For an inline style node, the property is equal to null; the
8.media property indicates whether the style sheet is for screen, print (print), or both (all), which is read-only and the default is screens;
Method: DeleteRule () Deletes a rule from the style sheet, insertrule () Inserts a new rule into the stylesheet, IE9 the following addrule (), Removerule (),
such as:

 Document.stylesheets[0].insertrule (' #test: hover{color:white;} ', 0);
 Document.stylesheets[0].deleterule (0); Deletes the first rule document.stylesheets[0].cssrules[1].selectortext in the style sheet
 ;//Returns the selector string
 document.stylesheets[0]. Cssrules[1].csstext; Returns the rule string containing the selector

 Document.stylesheets[0].cssrules[1].style.border;
 Document.stylesheets[0].cssrules[1].style.csstext; Returns all style declaration strings for the current rule

the getComputedStyle method with the Window object , the first argument is an element object, and the second argument can be null, an empty string, a pseudo element string, This method returns a read-only Cssstyledeclaration object representing the computed style, which represents the final style information that is actually applied to the specified element, that is, the result of a variety of CSS rules superimposed;

such as:var color = window.getComputedStyle (Elm, ': Before '). Color;
var color = window.getComputedStyle (Elm, ': Before '). GetPropertyValue (' color ');
or:var color = window.getComputedStyle (elm, null). Color;

Represents the difference between a Cssstyledeclaration object that evaluates a style and an Cssstyledeclaration object that represents an inline style:
1. The properties of the computed style are read-only;
2. The value of the calculated style is absolute, and the relative units such as percentages and dots will all be converted to the absolute value of the string with the suffix ' px ', whose value is that the property of the color will be returned in "RGB (#,#,#)" or "Rgba (#,#,#,#)" format;
3. Does not calculate the compound attribute, only is based on the most basic attribute, if does not inquire margin, but separately inquires margintop and so on;
4. The calculated style object does not define the Csstext property;
5. The calculation style is deceptive at the same time, when used, it is necessary to pay attention to the return value when querying some properties, such as query font-family;
6.IE9 the getComputedStyle method is not supported below, the element object of IE has currentstyle attribute;

Six, add style sheet directly
1. Create labels <style> add a built-in style sheet

var style1 = document.createelement (' style ');
 style1.innerhtml = ' body{color:red} #top: Hover{background-color:red;color:white;} ';
 Document.head.appendChild (Style1);

2. The other is to add an external style sheet that adds a link node to the document and then points the href attribute to the URL of an external style sheet

var link1 = document.createelement (' link ');
Link1.setattribute (' rel ', ' stylesheet ');
Link1.setattribute (' type ', ' text/css ');
Link1.setattribute (' href ', ' reset-min.css ');
Document.head.appendChild (LINK1);

The Window.matchmedia method is used to check the Mediaquery statement of the CSS. the latest version of the various browsers, including IE 10+, supports this method, and a Third-party function library matchmedia.js is available for older browsers that do not support this method;
Here is an example of a mediaquery statement:

 @media all and (max-device-width:700px) {
           background: #FF0;}
 
        } 

The Window.matchmedia method takes the string of a mediaquery statement as a parameter and returns a Mediaquerylist object. The object has the following two properties:
Media: Returns the Mediaquery statement string that is queried.
matches: Returns a Boolean value that indicates whether the current environment matches the query statement.

var result = Window.matchmedia (' (max-width:700px) ');
    if (result.matches) {
      console.log (' page width is less than 700px ');
    } else {
      console.log (' page width greater than 700px ');
 
    }

The Mediaquerylist object returned by the Window.matchmedia method has two methods for listening to events: The AddListener method and the RemoveListener method. If the Mediaquery query result changes, the specified callback function is invoked;

 var mql = Window.matchmedia ("(max-width:700px)");
    Mql.addlistener (mqcallback);//Specifies the callback function
    Mql.removelistener (mqcallback);/Undo Callback Functions function
 
    Mqcallback (MQL) {
 
      if (mql.matches) {//width less than equal to 700 pixels} 
 
      Else {//width greater than 700 pixels}
 
    } 

This article refers to:
Mdn:https://developer.mozilla.org/zh-cn/docs/web/api
Nanyi JavaScript Reference: http://javascript.ruanyifeng.com/dom/css.html
JavaScript Authority Guide Sixth edition

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.