<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ 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>