Detailed explanation of the method of reading and writing CSS style by native javascript

Preface

Maybe when you talk about operating css style, many people will think of css method of jQuery: $(selector).css(name) But have you thought about how to use native js to achieve similar functions?

The most familiar method of manipulating styles in native js is the Style object in DOM, but this method can only obtain and modify inline styles in html documents, and cannot manipulate non-inline styles (internal styles and external style sheets).

Through searching and sorting, I summarized the implementation of reading and writing css style using native js. Let's not say much below, let's take a look at the detailed introduction.

Get Styles

1. dom style

This method can only get inline styles:

var text = document.getElementById('text');
var textColor = text.style.color;

//  Get textColor The value of is  '#000'

2. currentStyle

This method is only applicable to IE browsers, which is formally the same as element.style Similar, the difference is that just like currentStyle's name-current style (css loaded style), it returns the current final CSS attribute value of the element, including the style in the internal style tag and the externally introduced css file.

Usage: Element.currentStyle. Attribute

For example, we want to get width whose id is box:

var boxWidth = document.getElementById('box').currentStyle.width;

//  Get boxWidth The value of is  '200px'

3. getComputedStyle

getComputedStyle is an CSS attribute value that can get all the final uses of the current element. Returns an CSS style declaration object ([object CSSStyleDeclaration]) and is read-only.

In terms of compatibility, basic support: Chrome, Firfox, IE9, Opera, Safari

Usage: getComputedStyle (element, pseudo-class). Attribute, the second parameter is set to null if it is not pseudo-class.

var el = document.getElementById("box");
var style = window.getComputedStyle(el , ":after");

To encapsulate a general function of getting style

In order to apply to major browsers, let's write a function:

//  This function needs to pass two parameters: the element object and the style attribute name 

function getStyle(el, styleName) {

 if( el.currentStyle ) {
 
 // for IE
 return el.currentStyle[styleName];
 
 } else {
 
 // for peace
 return getComputedStyle(el, false)[styleName];
 }
 
}

Then call this function to get the width of box:

var box = document.getElementById("box");

var boxWidth = getStyle(box, 'width');

This function does not take into account the related operations on pseudo-classes, and can be extended as needed ~

What is the difference between getComputedStyle and style?

Since they all get the values of style attributes, what's the difference between them:

Read-only versus writable

The getComputedStyle method is read-only and can only get styles but not set, but element.style Can read and write.

Object scope obtained

The getComputedStyle method gets all CSS attribute objects that are finally applied to the element (even if there is no CSS code, the default ancestor 8 generations will be displayed); And element.style You can only get the CSS style in the style attribute of the element. So for a bare element < p > The getComputedStyle method returns that the length attribute value (if any) in the object is 190 + (according to my tests of FF: 192, IE 9: 195, Chrome: 253, the results may vary from environment to environment), and element.style Is 0.

Quoted from-Zhang Xinxu's blog article

Setting Styles

1. dom style

Needless to say, for example, change the background color of elements to red:

var el = document.getElementById('box');
el.style.backgroundColor = 'red';

2. cssText Properties

The essence of cssText is to set the style attribute value of the HTML element. It is a text representation of a set of style attributes and their values. This text is formatted as an CSS style sheet with the curly braces removed from the element selector that surrounds the attributes and values.

Its usage is similar to innerHTML: document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

For details, please refer to: CSSRule. cssText-Web APIs MDN

Summarize