获取非行间样式-各个浏览器兼容性问题
程序员文章站
2022-07-04 15:01:35
...
在前面的文章中有利用，style 可以获取行间样式和设置行间样式:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
alert(oDiv.style['width']);
}
</script>
<body>
<div id="div1" style="width:200px;height:200px;background:#0F6;">
</body>
</html>但是不能获取非行间样式，根据不同的浏览器有以下方式获取;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:200px;
height:200px;
background:#0F6;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
//alert(oDiv.currentStyle.width); //只能在IE浏览器中使用
//alert(getComputedStyle(oDiv,false).width); //chrome 360 火狐
//解决兼容性问题
if(oDiv.currentStyle){//支持IE
alert(oDiv.currentStyle.width);
}
else{
alert(getComputedStyle(oDiv,false).width);
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>为了以后可以方便用到，可以封装成函数库直接调用。
上一篇： 浏览器兼容性问题及解决方案(JS部分)
下一篇： 脾胃保健是关键章穆饮食养生思想