How to get the style attribute value of an element?

If you want to get a specific style attribute value of an element, what do you need to do? Below I will show you how I did it, I hope it can help you.

1, Element.style.Attribute name

We need to write the style of the element in the inline style Only then (writing it in the style sheet will not work)

console.log(box.style.height) ->null

In real projects, this method is not commonly used because all styles cannot be written inline in order to obtain the value (the separation of html and css cannot be achieved)

2. Use this method to obtain all styles calculated by the browser.

#All styles calculated by the browser: As long as the current element tag can be rendered on the page, then all its styles are calculated by the browser (rendered ) -> Even if you don’t write some styles, we can still get

The obtained result is an instance of the CSSStyleDeclaration class: it contains the current element All style properties and values

##console.log(window.getComputedStyle);//function

console.log(

window.getComputedStyle(box,null))["height"]3. Although the method is easy to use, it is incompatible under IE6-8: because there is no getComputedStyle attribute under window -> an error will be reported

Under IE6-8, we can use currentStyle to obtain all styles calculated by the browser

console.log(box.currentStyle)

Console.log(box.currentStyle.height)

Get the compatible writing method of style getCss: Get the current element The value corresponding to [attr] in all styles calculated by the browser

/*curEle:[object] 当前要操作的元素对象 
            attr:[string] 我们要获取的样式属性的名称
            1、使用try、catch来处理兼容（只有在不得已的情况下）
               前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理
               不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，
            2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
            3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
            获取当前浏览器是IE6-8            */function getCss(curEle,attr){var val = null;//方法2if("window.getComputedStyle" in window){//或者window.getComputedStylevar = window.getComputedStyle(curEle,null)[attr];
            }else{var = curEle.currentStyle[attr];
            }//方法1try{var = window.getComputedStyle(curEle,null)[attr];
            }catch(e){var = curEle.currentStyle[attr];
            }//方法3if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }return val;        
        }

console.log(getCss(box,"border"))
        console.log(getCss(box,"fontFamily"))

Standard browser and IE The results obtained by browsers are still different -> For some style attributes, the results obtained by different browsers are different, mainly because getComputedStyle and currentStyle are different in some aspects

For composite style values, you can disassemble them to obtain

##console.log(getCss(box,"marginTop"))

The above getCss has not been written yet. Let’s do the first upgrade

: Remove the "unit" from the obtained style value (parseFloat can only be used if it matches "number + unit/number")

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式属性的值是不能去单位的，例如：float position  margin  padding  border    这些复合值 background    }

Second upgrade: Some style attributes are incompatible in different browsers, such as opacity

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){if(attr==="opacity"){
                    val = curEle.currentStyle["filter"];//把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                    val = reg.test(val)?reg.exec(val)[1]/100:1}else{
                    val = curEle.currentStyle[attr];
                }                
            }else{//如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下获取透明度需要使用filterval = window.getComputedStyle(curEle,null)[attr];
            }}

To add a small knowledge point: pseudo-class

:before : after Create a new virtual label before or after an element note. We can add styles to this virtual label, or add content, etc... We can also clear floats through pseudo classes. We can get window.getComputedStyle in the following way. (box,"before").content

The above is the detailed content of How to get the style attribute value of an element?. For more information, please follow other related articles on the PHP Chinese website!