How to read and write CSS styles using native javascript

I have encountered this problem in my recent studies. For future convenience, I have read some documents and summarized the following methods, which are limited to native JS. If there is anything wrong, please point it out! After reading this, I think it's okay to learn something! The following article describes how to use native javascript to read and write CSS styles. For more information, see. I have encountered this problem in my recent studies. For future convenience, I have read some documents and summarized the following methods, which are limited to native JS. If there is anything wrong, please point it out! After reading this, I think it's okay to learn something! The following article describes how to use native javascript to read and write CSS styles. For more information, see.

Preface

Most people may think of jQuery's css method when talking about how to operate css styles:$(selector).css(name) But have you thought about how to use native js to implement similar functions?

The native js operation Style method that everyone is most familiar with does not belong to the Style object in DOM, but this method can only get and modify inline styles in html documents, you cannot operate non-inline styles (internal styles and external styles ).

I searched and sorted out the implementation of css style read and write using native js. I will not talk about it below. Let's take a look at the detailed introduction.

Get Style

1. dom style

This method can only obtain inline styles:

Var text = document. getElementById ('text'); var textColor = text. style. color; // The textColor value is '#000'

2. currentStyle

This method is only applicable to IE browser.element.styleSimilar, the difference is that, just like currentStyle, the current style (the style after css loading) returns the final CSS attribute value of the element, includes the style in the internal style label and the css file introduced externally.

Usage: element. currentStyle. Attribute

For example, we want to obtain the width of the box with the id:

Var boxWidth = document. getElementById ('box'). currentStyle. width; // The value of boxWidth is '200px'

3. getComputedStyle

GetComputedStyle is a CSS attribute value that can be used to obtain all the final CSS attribute values of the current element. The returned object is a CSS style declaration object ([object CSSStyleDeclaration]) and is read-only.

Compatibility: Chrome, Firfox, IE9, Opera, and Safari

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

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

Lai ~ Encapsulate a common function for getting styles

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

// This function requires two parameters: Element Object and style attribute name function getStyle (el, styleName) {if (el. currentStyle) {// for IE return el. currentStyle [styleName];} else {// for peace return getComputedStyle (el, false) [styleName];}

Call this function to obtain the width of the box:

var box = document.getElementById("box");var boxWidth = getStyle(box, 'width');

This function does not take into account operations related to pseudo classes, and can be expanded as needed ~

What is the difference between getComputedStyle and style?

Since the values of style attributes are obtained, what are the differences between them:

Read-only and writable

The getComputedStyle method is read-only and can only obtain the style but cannot be set.element.styleBoth read and write.

Range of retrieved objects

The getComputedStyle method obtains all CSS attribute objects that are finally applied to the elements (even if no CSS code is available, the default ancestor octal is displayed ).element.styleOnly CSS styles in the element style attribute can be obtained. Therefore, for a bald Element

, The length attribute value (if any) in the object returned by the getComputedStyle method is 190 + (according to my test FF: 192, IE9: 195, Chrome: 253, the results of different environments may be different), whileelement.styleIt is 0.

Reference from -- Zhang xinxu's blog

Set Style

1. dom style

Needless to say, for example, changing the background color of an element to Red:

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

2. cssText attributes

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 a CSS style sheet, removing the curly brackets of the element selector that enclose attributes and values.

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

For more details about how to use native javascript to read and write CSS styles, refer to the PHP Chinese website!