JS 获取元素真实样式
众所周知,在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
本文标签: 前端