豫ICP备2024044691号-1
powered by emlog
window.getComputedStyle
Mins 2020-3-18 00:03 JavaScript

众所周知,在JS里直接获取 dom.style.width 只能获取到行间样式,无法获取的外部样式表里的内容,所以它来了:
window.getComputedStyle(element, [pseudoElt]);
它可以获取元素渲染之后的样式,封装一下,很是方便:

HTMLElement.prototype.getStyle = function (){
    let result;
    let paramsNumber = arguments.length;
    if(paramsNumber > 1){
        result = {};
        for(let i=0; i<paramsNumber; i++){
            result[arguments[i]] = window.getComputedStyle(this)[arguments[i]];
        }
    }else result = window.getComputedStyle(this)[arguments[0]];
    return result;
}

在需要的地方调用:

let style =  document.querySelector('.demo').getStyle('width');
console.log(style) // 100px

let style =  document.querySelector('.demo').getStyle('width', 'height');
console.log(style) // { width: '100px', height: '100px' }

有必要提示一下,此API需要在DOM加载完成以后使用哦!