原生js获取css样式
程序员文章站
2022-04-29 13:43:57
...
在前端开发过程中往往需要动态的编辑、修改一个UI的样式，这必然涉及到style的获取与设置。
一般都说有图有真相，而我们程序猿当然是用demo来说明一切，下面就根据一则具体事例探讨原生js获取css样式的方法。
- 事例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#div1{
width: 200px;
background:#00f;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="div1" style="height:100px;"></div>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
// div的width
console.log(oDiv.style.width);
// div的height
console.log(oDiv.style.height);
}
</script>
</body>
</html>
经过浏览器运行之后，在console控制台很明显有输出。
- 第一行是空白；
- 第二行会输出
100px。
很多人不明白是怎么回事，想要获取的width怎么是空白。
原来是因为直接用oDiv.style方法只能获取元素的内联样式，对于内部样式和外联样式，这种方法则不能取得。
因此要另寻出路，众所周知，IE浏览器总是别具一格，格外奇葩，所以这里还得解决兼容性问题：
- IE浏览器：
var oDiv = document.getElementById('div');
var styles = oDiv.currentStyle;
styles.width;
- 其他浏览器：
var oDiv = document.getElementById('div');
var style = window.getComputedStyle(oDiv, null);
styles.width;
- 封装方法：
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
提示：
- 这个方法需要传两个参数，
obj是将要获取样式的元素，attr则是样式的属性，如width、color等，调用此方法时attr必须要加上引号，不然会报错； - 此方法只能获取
单一属性样式，像border、background等具有综合属性的样式，只有chrome浏览器能获取；而其他浏览器只能通过borderStyleColor这种驼峰命名的单一属性来取得； - 如果使用的是jQuery，则不需要如此操作，可直接用
$('obj').css('attr')来获取，因为JQ的底层就是用currentStyle[attr]和getComputedStyle(obj)[attr]这种方法进行封装的。
参考博文：
下一篇： JS设置CSS样式的几种方式