如何用js获取元素的样式？
程序员文章站
2022-04-29 13:43:09
...
如何用js去获取元素的样式？
三个方法 :
1- 元素.currentStyle.属性名字
2- 元素.style.属性名字
3- getComputedStyle(元素,伪元素或null).样式属性名
<body>
<div id="box" style="background-color: yellow;"></div>
<button id="btn">读取</button>
<script>
window.onload = function () {
document.getElementById("btn").onclick = function () {
/**
* 1- style读取
* 可以读取内联样式
* 不能读取到style里面的样式
*
* 读取的同时，也是可以设置样式，设置的样式是加在内联样式上的
*/
// console.log(document.getElementById("box").style.backgroundColor);
// console.log(document.getElementById("box").style.width);
// document.getElementById("box").style.float = "right"
/**
* 2- currentStyle
* 读取的样式是不分内联样式还是 style里面的样式，只要是样式就可以读取
* 兼容性不好，是IE专属的用来获取CSS属性，但是谷歌和火狐都不支持；
*/
// console.log(document.getElementById("box").currentStyle.backgroundColor);
// console.log(document.getElementById("box").currentStyle.width);
/**
* 3- getComputedStyle
* 兼容性好
*/
console.log(getComputedStyle(document.getElementById("box"), null).width);
console.log(getComputedStyle(document.getElementById("box"), null).backgroundColor);
}
}
</script>
</body>
上一篇： JS设置CSS样式的几种方式