前言
很多时候我们需要利用代码获取当前元素样式,然后进行修改。但是我们需要怎么利用JS代码获取呢?下面就分享有关的实例啦!有兴趣的小伙伴可以复制到编译当中,运行查看效果。
获取元素样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" style="font-size: 20px;"></div>
<script type="text/javascript">
var oBox = document.getElementById("box")
// alert(oBtn.id)
// oBox.style.width = "200px"
// 写到style标签中的样式,无法获取宽度
// alert(oBox.style.width)
// 通过对象.style.属性的这种方式,只能获取行内样式
// alert(oBox.style.fontSize)
// getComputedStyle:获取计算后的样式
alert(getComputedStyle(oBox).width)
// 注意:兼容性问题,在标准浏览器下 用getComputedStyle
// 在ie低版本(6、7、8) currentStyle
function getStyle(obj,attr){
if(window.getComputedStyle){
// 注意:如果属性名是一个变量,需要把.换成[]
return window.getComputedStyle(obj)[attr]
}else{
return obj.currentStyle[attr]
}
// 三目运算符
return window.getComputedStyle ? window.getComputedStyle(obj)[attr]:obj.currentStyle[attr]
}
</script>
</body>
</html>