JS 获取元素真实样式

作者:Mins 时间:2021-04-23 分类:技术教程

众所周知,在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' }


参考资料:MDN

本文标签: js样式

推荐模板
推荐阅读

欢迎登录模板控!

登录代表您已同意模板控《用户协议》并自愿遵守