//获取元素当前显示的样式
//语法:元素.currentStyle.样式名
//可以读取当前显示的样式,只能用于ie浏览器,不能用其他
//alert(box1.currentStyle.width);
/*
*其他浏览器中可以使用
* 语法:getComputedStyle();
* 需要传递两个参数
* 第一个:要获取样式的元素
* 第二个:可以传递一个伪元素,一般不用,null代替
*
* 该方法会返回一个对象,对象中封装了当前元素对应的样式
* 获取的样式没有设置,则他会获取到真实的值,而不是默认值
* 比如:没有设置width,不会返回auto,而是一个长度
*/
//正常浏览器方式
// var cp = getComputedStyle(box1,null);
// alert(cp.width);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>读取元素的样式</title>
<style type="text/css">
#box1 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function () {
//点击按钮后读取box1的样式
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
btn01.onclick = function () {
//获取元素当前显示的样式
//语法:元素.currentStyle.样式名
//可以读取当前显示的样式,只能用于ie浏览器,不能用其他
//alert(box1.currentStyle.width);
/*
*其他浏览器中可以使用
* 语法:getComputedStyle();
* 需要传递两个参数
* 第一个:要获取样式的元素
* 第二个:可以传递一个伪元素,一般不用,null代替
*
* 该方法会返回一个对象,对象中封装了当前元素对应的样式
* 获取的样式没有设置,则他会获取到真实的值,而不是默认值
* 比如:没有设置width,不会返回auto,而是一个长度
*/
//正常浏览器方式
// var cp = getComputedStyle(box1,null);
// alert(cp.width);
//ie8
//alert(box1.currentStyle.width);
alert(getStyle(box1, "width"));
};
};
/*
*定义一个函数,用来获取指定元素当前的样式
* 参数:obj要获取指定的元素
* :name,要获取元素的样式的样式名
*
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器
return getComputedStyle(obj, name)[name];
} else {
//ie8
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br><br>
<div id="box1"></div>
</div>
</body>
</html>