Detailed Explanation of Reading and Writing CSS Styles with Native JavaScript

Introduction

When people mention manipulating CSS styles, many may think of jQuery's css method: $(selector).css(name), but have you ever thought about how to achieve similar functionality with native JavaScript?

The most familiar method for manipulating styles in native JavaScript is undoubtedly the Style object in DOM, but this method can only get and modify inline styles in the HTML document and cannot operate non-inline styles (internal styles and external style sheets).

Through searching and organizing, I have summarized the implementation of reading and writing CSS styles with native JavaScript. Without further ado, let's take a detailed look at the introduction.

Get Styles

1. dom style

This method can only retrieve inline styles:

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

2.currentStyle

This method is only applicable to IE browsers and is similar in form to element.style, the difference being that as the name suggests—currentStyle—the style at the moment (after CSS is loaded), it returns the current final CSS property value of the element, including styles from internal style tags and external css files.

Usage: element.currentStyle.property

For example, if we want to get the width of the element with id 'box':

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

3. getComputedStyle

getComputedStyle is a method that can obtain all the final used CSS property values of the current element. It returns a CSS style declaration object ([object CSSStyleDeclaration]) and is read-only.

In terms of compatibility, it is basically supported by: Chrome, Firfox, IE9、Opera、Safari

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

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

Let's wrap a universal function to get styles

To make it compatible with major mainstream browsers, let's write a function:

// This function requires two parameters: the element object and the name of the style attribute
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 operations related to pseudo-classes and can be extended as needed.

Differences between getComputedStyle and style?

Since both are used to retrieve the values of style properties, what are the differences between them:

Read-only and writable

The getComputedStyle method is read-only and can only retrieve styles but cannot set them, whereas element.style can both read and write.

Range of the obtained object

The getComputedStyle method returns an object of all CSS properties applied to the element (even if there is no CSS code, it will also display the default styles of ancestors); whereas element.style can only access the CSS styles in the element's style attribute. Therefore, for a plain element <p>, the value of the length property in the returned object (if there is one) is190+(According to my test FF:192, IE9:195, Chrome:253, the results may vary in different environments), and element.style is 0.

Quote from - Zhang Xinxu Blog Articles

Set Style

1. dom style

This is self-explanatory, for example, changing the background color of an element to red:

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

2. cssText property

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 properties and their values. This text is formatted into a CSS stylesheet, removing the curly braces around the selector of the properties and values.

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

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

Summary

That's all for this article. I hope the content of this article can bring some help to everyone's learning or using Javascript. If you have any questions, you can leave a message for communication. Thank you for your support of the Yell Tutorial.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)