我们在js获取容器高度与宽度都是如下
| 代码如下 | 复制代码 |
|
<div id='div' style='width:20px;'></div> <script type='text/javascript'> alert(document.getElementById('div').style.width); //return 20px alert(document.getElementById('div').style.height); //return 空 </script> |
|
后来有了jquery，就可以很方便快速的写了：
| 代码如下 | 复制代码 |
|
$('div').width() |
|
而且取到的值是整型，省了parseInt函数。
虽然大多数时候
| 代码如下 | 复制代码 |
|
$('div').css('width') |
|
获取的值都是实际宽度值，但经过测试，有时候也会有误差，甚至不同浏览器又不同的结果。而最保险的还是
| 代码如下 | 复制代码 |
| $('div').width() | |
写法比较靠谱！
这个方法相当好，可以返回外部style文件里的属性。但是有个缺点，就是不能正确返回没有定义的属性值。
最终方法
| 代码如下 | 复制代码 |
|
//offsetHeight & offsetWidth //if NO DocType & IE //var other = borderTop + borderBottom + paddingTop + paddingBottom; //offsetHeight = height>other? height: other; //if HTML & XHTML DocType & IE & Mozilla //offsetHeight = height + paddingTop + paddingBottom + borderTop + borderBottom; //如：alert(document.getElementById('div').offsetHeight + 'px') |
|
这样可以很好的获得宽度和高度了
下面分享一个js的写法
runtimeStyle 运行时的样式！可覆盖style的属性！
currentStyle 指 style 和 runtimeStyle 的结合！
| 代码如下 | 复制代码 |
|
<style>#div{width:20px;}</style> <div id='div'></div> <script type='text/javascript'> //if IE alert(document.getElementById('div').currentStyle.width); //return 20px alert(document.getElementById('div').currentStyle.height); //return auto //if Mozilla alert(getComputedStyle(document.getElementById('div'), '').width); //return 20px alert(getComputedStyle(document.getElementById('div'), '').height); //return 0px </script> |
|
时间： 2024-11-01 12:00:00