js用style属性可以获得html标签的样式，但是不能获取非行间样式，如何获取css的非行间样式呢，在低版本ie我们可以用currentStyle，在其他浏览器我们可以用getComputedStyle。
1、ie
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width:200px; height:200px; background: skyblue; } </style> <script> window.onload=function(){ var box=document.getElementById("box"); alert(box.currentStyle["width"]); //200px } </script> </head> <body> <div id="box"></div> </body> </html>
2、其他浏览器
alert(getComputedStyle(box,false)["width"]); //200px
3、兼容
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
window.onload=function(){
var box=document.getElementById("box");
alert(getStyle(box,"width")); //兼容ie及其他浏览器
}
</script>
4、获取及设置非行间样式
<script>
function getStyle(obj,attr,value){
if(arguments.length==2){ //根据参数个数执行相应操作
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}else{
obj.style[attr]=value; //这里需要注意，使用obj.style.attr无效
}
}
window.onload=function(){
var box=document.getElementById("box");
getStyle(box,"backgroundColor","yellowgreen"); //把盒子的背景颜色设置成黄绿色
alert(getStyle(box,"width")); //弹出盒子的宽度200px
}
</script>