JS读取内联样式 并解决浏览器兼容性问题
程序员文章站
2022-03-05 09:27:53
...
**
JS读取内联样式 并解决浏览器兼容性问题
**
<html>
<head>
<title></title>
<style type="text/css">
#box01{
width:200px;
height:500px;
background-color:red; /*!important优先级最高*/
}
</style>
<script type="text/javascript">
window.onload = function(){
var box01 = document.getElementById("box01");
var btn01 = document.getElementById("btn01");
//通过style设置和读取的都是内联样式，内联样式优先级比较高，会立即显示
box01.style.width="1000px";
btn01.onclick=function(){
box01.style.backgroundColor="yellow";
//获取元素当前显示的样式
//①IE浏览器：元素.currentStyle.样式
//②IE9以上及主流浏览器：getComputedStyle(元素,null).样式
//第②个可以得到真实的值，比如没有设置width，会获得默认的width值，而第①个可能是auto。
//解决兼容性问题
var x = getStyle(box01,"width");
alert(x);
}
/*
定义函数获取指定元素的当前样式
obj 要获取样式的元素
name 要获取的样式名
*/
}
function getStyle(obj,name){
//正常浏览器
if(window.getComputedStyle)
return getComputedStyle(obj,null)[name]; //name是一个变量，.name表示获取样式名为name的样式，[name]获取变量表示的样式名
//IE8及以下
else{
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<div id="box01"></div>
</body>
</html>
上一篇： 第十二章
下一篇： OpenGL实验一 基本的画线
推荐阅读
-
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
-
浏览器兼容性问题汇总，并附解决方法
-
JS来获取全局样式值—style，currentStyle，getComputedStyle() 并解决浏览器兼容性问题
-
浏览器样式兼容性问题及解决方式（一）
-
js解决浏览器兼容性问题的原理
-
解决js new Date()的浏览器兼容性问题，IE、safari中值为Invalid Date的问题
-
浏览器兼容性问题及解决方案(JS部分)
-
原创：Js解析xml文件并简单实现省市区级联菜单(并解决各浏览器兼容性问题)....
-
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
-
浏览器兼容性问题汇总，并附解决方法