JavaScript style object and CurrentStyle object case study

1. Style object

The style object represents a single style declaration and can be accessed from the document element to which the style is applied. The style object obtains the inline style , that is, the value of the style attribute in the element tag.

example:

<style type="text/css">#div{color:gray;}</div>//Internal style <div id="div" style="color:red;"></div>//Inline style document.getElementById('id').style.color;//The value is red

2. currentStyle object

Returns the final style of all style declarations (including internal, external, and inline) applied to the element according to the CSS cascading rules. Only IE and Opera support using CurrentStyle to get the calculated style of an element. The getComputeStyle() method can get the CSS attribute value used by the current element.

var div=window.getComputeStyle("div",null).color; //The first parameter is the target element, the second parameter is the pseudo-class (required, set to null if there is no pseudo-class)

The difference from the style object:

getComputeStyle() is read-only, it can only be obtained but not set, while style can be read and set;

For an element that does not have any style set, getComputedStyle() returns the value of the length property in the object, and the length in the style object is 0.

Different browsers have different support for the currentStyle object, so compatibility needs to be addressed.

var div = document.getElementById('div');

var colorStr=null;

if(div.currentStyle){//Compatible with IE

       colorStr=div.currentStyle;

}else{
colorStr=window.getComputedStyle(div,null);

}

var col=colorStr.color; //Get the color attribute value of div

3. Example (Draggable Layer)

CurrentStyle Object

style object

This is the end of this article about the detailed case analysis of JavaScript style object and CurrentStyle object. For more relevant content about js style object and CurrentStyle object, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!