如何获取元素的css样式?
小情景
请获取百度页面中,百度一下按钮的样式
解法
我们可以使用getComputedStyle
来获取当前元素(也就是百度一下按钮)的最终css属性值,也就是你最终看到的样式,究竟由哪些css属性值组成。
疑问
如何使用getComputedStyle
?
getComputedStyle的语法如下:
window.getComputedStyle(元素, [伪类])
getComputedStyle
的参数中,元素为必传参数,伪类可以不传
getComputedStyle
返回的值是一个具有样式属性的对象,这个对象是一个只读对象。可以通过getPropertyValue
方法读取对象的属性值来获取对应的css样式。
你打开百度后,可以在控制台内输入下面的代码尝试:
// 获取百度一下按钮样式
const baiduButton = document.querySelector('input[type="submit"]');
const baiduButtonStyle = window.getComputedStyle(baiduButton);
console.log(baiduButtonStyle);
console.log(baiduButtonStyle.getPropertyValue('background-color'));
baiduButtonStyle['background-color'] = "rgb(0, 0, 0)";
控制台内会返回下面👇的结果
①:
getComputedStyle
方法返回的是一个CSS样式声明对象
②:可以直接通过getPropertyValue
方法获取对应的css属性值
③:通过getComputedStyle
方法获取的对象是一个只读对象