Common ways to get styles in Js-JS Tutorial-php.cn

We know that if you want to operate CSS in JS, the most important thing is to obtain the style. Here is an article about the most common methods of obtaining styles in JS for your reference.

Document div{ color:yellow; } This is div Copy after login Get it by using the element.style property

var div = document.getElementsByTagName("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundColor); //red Copy after login The element.style property can only get the inline style, not the style in the tag, nor Unable to obtain external style

Since element.style is an attribute of the element, we can reassign the attribute to rewrite the display of the element.

var div = document.getElementsByTagName("div")[0]; div.style['background-color'] = "green"; console.log(div.style.backgroundColor); //green Copy after login 2. Get the style through getComputedStyle and currentStyle

The usage environment of getComputedStyle is chrome/safari/firefox IE 9,10,11

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow Copy after login currentStyle can be used in IE It is perfectly supported, chrome does not support it, and ff does not support it

var div = document.getElementsByTagName("div")[0]; var styleObj = div.currentStyle; console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow Copy after login 3. The difference between ele.style and getComputedStyle or currentStyle

3.1 ele.style is read and write, while getComputedStyle and currentStyle are only Read

3.2 ele.style can only get the CSS style set in the inline style attribute, while getComputedStyle and currentStyle can also get other default values

3.3 ele.style gets the style attribute The style in is not necessarily the final style, while the other two get the final CSS style of the element

4. How to get style compatibility

//获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名 function getStyle(obj,attr){ //针对IE if(obj.currentStyle){ return obj.currentStyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值 }else{ //针对非IE return window.getComputedStyle(obj,false)[attr]; } } function css(obj,attr,value){ if(arguments.length == 2){ return getStyle(obj,attr); }else{ obj.style[attr] = value; } } .window.getComputedStyle(ele[,pseudoElt]); Copy after login If the second parameter is null or If omitted, the CSSStyleDeclaration object of ele will be obtained.

If it is a pseudo-class, the CSSStyleDeclaration object of the pseudo-class will be obtained.

div{ width:200px; height:200px; background-color:#FC9; font-size:20px; text-align:center; } div:after{ content:"This is after"; display:block; width:100px; height:100px; background-color:#F93; margin:0 auto; line-height:50px; } This is div var btn = document.querySelector('#btn'); btn.onclick = function(){ var div = document.querySelector('#myDiv'); var styleObj = window.getComputedStyle(div,'after'); console.log(styleObj['width']); } Copy after login

getPropertyValue acquisition The specified property value in the CSSStyleDeclaration object

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.getPropertyValue("background-color")); getPropertyValue(propertyName);中的propertyName不能是驼峰式表示 obj.currentStyle['margin-left'] 有效 obj.currentStyle['marginLeft'] 有效 window.getComputedStyle(obj,null)['margin-left'] 有效 window.getComputedStyle(obj,null)['marginLeft'] 有效 window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效 window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 无效 obj.currentStyle.width 有效 obj.currentStyle.background-color 无效 obj.currentStyle.backgroundColor 有效 window.getComputedStyle(obj,null).width 有效 window.getComputedStyle(obj,null).background-color 无效 window.getComputedStyle(obj,null).backgroundColor 有效 Copy after login To sum up, the property with "-" cannot be directly clicked, so there is the getProperty Value method to handle it, but you can use [] to Replaces getPropertyValue

7.defaultView

In many online demo codes, getComputedStyle is called through the document.defaultView object. In most cases, this is not needed because it can be called directly through the window object . But there is one situation where you must use defaultView, which is to access the style (iframe) in the subframe on firefox3.6

I believe you have mastered the method after reading these cases, please pay attention to php for more exciting information Other related articles on the Chinese website!

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Common ways to get styles in Js