浏览 5317 次
|
锁定老帖子 主题：js获取html元素宽度的思考
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-09-11
最后修改：2010-01-11
分两种情况讨论： 1、使用内联样式，即直接把CSS写在HTML元素的style属性中 <div id="d1" style="width:100px;height:200px;"> </div> 通过以下js代码可以获取width等属性， alert(document.getElementById('d1').style.width);//100px
在firefox，ie，opera，safari，chrome上都可以取得到宽度和高度值。
2、使用嵌入、链入或引入样式表（非内联样式），这时候通过element.style.width是获取不到的。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>b.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#d2 {
width:400px;
height:200px;
border:5px solid gray;
padding:5px;
}
</style>
<script>
window.onload=function(){
//2、使用嵌入、链入或引入样式表（非内联样式）
//ie：通过currentStyle
alert(document.getElementById('d2').currentStyle.width);//400px ie
//ff,safari,opera,chrome:通过window.getComputedStyle
var el=document.getElementById('d2');
alert(window.getComputedStyle(el,null).style.width);//400px safari,opera,chrome
}
</script>
</head>
<body>
<div id="d2"></div>
</body>
</html>
最后封装到一个方法中， function getRealStyle(el,cssName)
{
var len=arguments.length, sty, f, fv;
'currentStyle' in el ? sty=el.currentStyle : 'getComputedStyle' in window
? sty=window.getComputedStyle(el,null) : null;
if(cssName==="opacity" && document.all){
f = el.filters;
f && f.length>0 && f.alpha ? fv=f.alpha.opacity/100 : fv=1;
return fv;
}
cssName==="float" ? document.all ? cssName='styleFloat' : cssName='cssFloat' : cssName;
sty = (len==2) ? sty[cssName] : sty;
return sty;
}
如果只想获取元素的style对象，则只传第一个参数，第二个参数是获取该对象style属性为styName的值。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
