获取元素的当前样式:
语法:元素.currentStyle.样式名
只在IE上支持
在其他浏览器中,可以使用 getComputedStyle(argu1,argu2)方法:
获取当前元素的样式
这个方法是window方法,可以直接使用
需要两个参数:
argu1:要获取样式的对象
argu2:可以传递一个伪元素,一般传递null即可
该方法返回一个集合对象,该对象封装了此元素的所有样式
可以通过 对象.样式名 获取数据
该方法不支持IE8及以下浏览器
所以需要解决浏览器兼容性问题。
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS获取元素样式</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 1px solid red;
}
</style>
<script>
window.onload = function () {
var btnRead = document.getElementById('btnRead');
var box1=document.getElementById('box1');
btnRead.onclick = function () {
// alert(box1.currentStyle.width+"-->"+box1.currentStyle.height+"-->"+box1.currentStyle.backgroundColor);
// var box1CssObj= getComputedStyle(box1,null);
// alert(box1CssObj.width+"--->"+box1CssObj.height+"--->"+box1CssObj.backgroundColor);
alert(getElementStyle(box1,"width"));
}
//封装函数:解决获取元素样式的兼容性问题
function getElementStyle(element,styleName){
// alert(getComputedStyle);
//检测当前运行的浏览器是否支持该方法
//其他的一些存在兼容性问题的方法或者属性,采用此方式进行检测
if(window.getComputedStyle)
return getComputedStyle(element,null)[styleName];
return element.currentStyle.styleName;
}
}
</script>
</head>
<body>
<div id="box1"></div>
<button id="btn">改变box的样式</button>
<button id="btnRead">读取box的样式</button>
</body>
</html>