各情景下元素宽高的获取实现代码
2011-09-13 00:00
561 查看
情景一,元素style属性设置了width/height
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下
div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto。
注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。
情景三,元素既没有设置style属性,也没有引入样式表
思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。
<div style="width:100px;">test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script>
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
<div>test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script>
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
<style>
div {width: 100px}
</style><div>test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script>
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
<style> div {width: 100px} </style> <div>test<div> <script> function getStyle(el, name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null); }else{ return el.currentStyle; } } var div = document.getElementsByTagName('div')[0]; alert(getStyle(div, 'width')); </script>
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下
<div>test<div> <script> function getStyle(el, name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null); }else{ return el.currentStyle; } } var div = document.getElementsByTagName('div')[0]; alert(getStyle(div, 'width')); </script>
div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto。
注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。
情景三,元素既没有设置style属性,也没有引入样式表
<div>test<div> <script> function getStyle(el,name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null)[name]; }else{ return el.currentStyle[name]; } } function getWH(el, name) { var val = name === "width" ? el.offsetWidth : el.offsetHeight, which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom']; // display is none if(val === 0) { return 0; } for(var i = 0, a; a = which[i++];) { val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0; val -= parseFloat( getStyle(el, "padding" + a) ) || 0; } return val + 'px'; } var div = document.getElementsByTagName('div')[0]; alert(getWH(div, 'width')); </script>
思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。
相关文章推荐
- jQuery与javascript对照学习 获取父子前后元素 实现代码
- Js获取图片原始宽高的实现代码
- jquery中通过过滤器获取表单元素的实现代码
- js获取元素相对窗口位置的实现代码
- jquery中通过过滤器获取表单元素的实现代码
- 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
- js获取隐藏元素宽高的实现方法
- 各情景下元素宽高的获取
- js获取元素相对窗口位置的实现代码
- 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
- jQuery与javascript对照学习 获取父子前后元素 实现代码
- js获取对象、数组的实际长度,元素实际个数的实现代码
- 各情景下元素宽高的或css中属性值获取
- jquery 简短几句代码实现给元素动态添加及获取提示信息
- jquery如何获取元素的滚动条高度等实现代码
- jQuery获取当前点击的对象元素(实现代码)
- jquery依然简短几句代码实现给元素动态添加及获取提示信息
- jQuery获取当前点击的对象元素(实现代码)
- 各情景下元素宽高的获取