<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script type="text/javascript">
/*
* 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
* 不能修改，如果要修改，必须通过style属性。
*/
window.onload=function()
{
var btn01=document.getElementById("btn01");
var box1=document.getElementById("box1");
/*
* currentStyle只有IE浏览器支持，其他浏览器都不支持。
*
* 获取元素的当前显示的样式
* 语法：元素.currentStyle.样式名
* 它可以用来读取当前元素正在显示的样式
* 如果元素没有设置样式，则获取他的默认值。比如width未设置的话返回auto。
*
*/
btn01.onclick=function()
{
alert(box1.currentStyle.width);
}
/*
* 在其他浏览器种可以使用(不支持IE8及以下)。
* getComputedStyle()这个方法来获取元素当前的样式
* 这个方法是window的方法，可以直接使用
* 需要两个参数
* 第一个，要获取样式的元素
* 第二个，可以传递一个伪元素，一般都传null
*
* 该方法会返回一个对象，对象中封装了当前元素对应的样式。
* 可以通过 对象.样式名来读取样式
* 如果未设置width，获取width时返回准确宽度，不会返回auto，获取颜色会返回rgb值。
*/
var btn02=document.getElementById("btn02");
btn02.onclick=function()
{
var obj=getComputedStyle(box1,null);
alert(obj.width);
}
//同时兼任IE8和其他浏览器的按钮
var btn03=document.getElementById("btn03");
btn03.onclick=function()
{
var get=getStyle(box1,"width");
alert(get);
}
}
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj,name)
{
//正常浏览器的方式
//return getComputedStyle(obj,null)[name]//获取对象的name属性，如果写成.name的话name就不是变量了。
//IE8的方式
//return obj.currentStyle[name];
if(window.getComputedStyle)//getComputedStyle返回一个对象，转换为Boolean类型。不加window为变量，变量找不着会报错，加了window变成属性，属性找不着返回undefined。
{
return getComputedStyle(obj,null)[name];
}
else
{
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<button id="btn02">点我一下</button>
<button id="btn03">点我一下</button>
<br /><br />
<div id="box1"></div>
</body>
</html>
浙公网安备 33010602011771号