In order to facilitate inquiries in the future, I have read some information and summarized the following methods. It is only limited to native JS. If there is any wrong place, please point it out! I just hope that everyone will be OK after reading it!
1. You can read and write the CSS style of document elements through the style object of the DOM node object (i.e., the CSSStyleDeclaration object).
For example: var elm = document.getElementById('test');
elm.style.color = 'black';
2. Directly read and write style attributes through getAttribute(), setAttribute(), and removeAttribute() of the Element object
For example: elm.setAttribute('style','color:red;line-height:30px');
3. Through the cssText property of the CSSStyleDeclaration object, setProperty(), removeProperty and other methods
like:
elm.style.cssText ='color:red;line-height:30px';elm.style.removeProperty('color');elm.style.setProperty('color', 'green', 'important');elm.style.cssText = ''; //Quickly clear all declarations of this ruleThe style declaration part of each CSS rule (the part inside the braces) is a CSSStyleDeclaration object, its properties and methods:
property:
1.cssText: All style declaration text of the current rule. This property can be read and written and can be used to set the current rule.
2.length: How many declarations does the current rule contain?
3.parentRule: The rule containing the current rule, the parentRule property of the same CSSRule interface.
method:
1. The getPropertyPriority() method returns the specified priority. If there is, it is "important", otherwise it is an empty string;
2. The getPropertyValue method returns the specified declared value;
3. The item(index) method returns the attribute name of the specified position, and is generally more direct using the [index] syntax;
4. The removeProperty method is used to delete a CSS property and return the deleted value;
5.setProperty method is used to set the specified CSS attribute, and there is no return value;
4. Use the document.styleSheets attribute to return all StyleSheet objects (that is, all style sheets) on the current page. It is a read-only class array object, and its element is a CSSStyleSheet object (inherited from the StyleSheet object). The property methods of this object are as follows:
property:
1. cssRules class array object, the elements are CSS rules CSStyleRule objects in the style sheet; IE9 is the following rules;
2. The disabled attribute is used to open or close a style sheet with a value of true or disabled;
3. The ownerNode property returns the DOM node where the StyleSheet object is located, usually <link> or <style>. For those stylesheets referenced by other stylesheets, this property is null;
4. Because the @import command of CSS allows other style sheets to be loaded in the style sheet, the parentStyleSheet property has the parentStyleSheet property, which returns the style sheet that includes the current style sheet. If the current stylesheet is a top-level stylesheet, the property returns null;
5. The type attribute returns the type value of the StyleSheet object, usually text/css;
6. The title attribute returns the title value of the StyleSheet object;
7. The href attribute is a read-only attribute, which returns the stylesheet address of the StyleSheet object connection. For embedded style nodes, this property is equal to null;
8. The media attribute indicates whether this style sheet is used for screen, print, or both are applicable (all). This attribute is read-only and the default value is screen;
Method: deleteRule() deletes a rule from the style sheet, insertRule() inserts a new rule into the style sheet, and IE9 is addedRule() and removeRule();
like:
document.styleSheets[0].insertRule('#test:hover{color: white;}',0); document.styleSheets[0].deleteRule(0); //Delete the first rule in the style sheet document.styleSheets[0].cssRules[1].selectorText; //Return the selector string document.styleSheets[0].cssRules[1].cssText; //Return the rule string, including the selector document.styleSheets[0].cssRules[1].cssText; //Return all style declaration strings for the current rule5. Use the getComputedStyle method of the window object. The first parameter is the Element object, and the second parameter can be null, empty string, or pseudo-element string. This method returns a read-only CSStyleDeclaration object representing the calculation style. It represents the final style information actually applied to the specified element, that is, the result after the superposition of various CSS rules;
For example: var color = window.getComputedStyle(elm, ':before').color;
var color = window.getComputedStyle(elm, ':before').getPropertyValue('color');
Or: var color = window.getComputedStyle(elm, null).color;
The difference between a CSSStyleDeclaration object representing a computed style and a CSSStyleDeclaration object representing an inline style:
1. The properties of the calculation style are read-only;
2. Calculate the value of the style is an absolute value. Relative units such as percentages and points will all be converted into string absolute values suffixed 'px'. The attribute whose value is the color will be returned in the format of "rgb(#,#,#)" or "rgba(#,#,#,#)";
3. Do not calculate compound attributes, but only based on the most basic attributes, such as not querying margin, but querying marginTop alone, etc.;
4. The cssText property is not defined in the style object;
5. The calculation style is also deceptive. When using it, you need to pay attention to the return value when querying certain attributes. For example, querying font-family;
6. The getComputedStyle method is not supported below IE9. The Element object of IE has the currentStyle attribute;
6. Add style sheet directly
1. Create a tag <style> to 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. Another way is to add an external stylesheet, that is, add a link node in the document and point the href attribute to the URL of the external stylesheet
var link1 = document.createElement('link');link1.setAttribute('rel', 'stylesheet');link1.setAttribute('type', 'text/css');link1.setAttribute('href', 'reset-min.css');document.head.appendChild(link1);7. The window.matchMedia method is used to check the mediaQuery statement of CSS. The latest versions of various browsers (including IE 10+) support this method. For old browsers that do not support this method, you can use the third-party function library matchMedia.js;
Here is an example of the mediaQuery statement:
@media all and (max-device-width: 700px) { body {background: #FF0;} }The window.matchMedia method accepts a mediaQuery statement string as a parameter and returns a MediaQueryList object. This object has the following two properties:
media: Returns the query mediaQuery statement string.
matches: Returns a boolean value indicating 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 or equal to 700px'); } else { console.log('page width is greater than 700px'); }The MediaQueryList object returned by the window.matchMedia method has two methods to listen for events: the addListener method and the removeListener method. If the mediaQuery query result changes, the specified callback function is called;
var mql = window.matchMedia("(max-width: 700px)"); mql.addListener(mqCallback);// Specify callback function mqCallback(mqCallback);// Undo callback function function mqCallback(mql) { if (mql.matches) {// Width less than or equal to 700 pixels} else { // Width greater than 700 pixels} }References to this article:
MDN: https://developer.mozilla.org/zh-CN/docs/Web/API
Ruan Yifeng javascript reference: http://javascript.ruanyifeng.com/dom/css.html
Authoritative JavaScript Guide Sixth Edition
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.