当元素的样式为display:none时获取他的宽高
Posted codeing or artist ?
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了当元素的样式为display:none时获取他的宽高相关的知识,希望对你有一定的参考价值。
其实这里可以用一个偷梁换柱的办法,把display:none改为 display:block;visibility:hidden;position:absolute;
在jquery的swap方法中实现了这种效果,我们来看源码:
1 var swap = function( elem, options, callback ) { 2 var ret, name, 3 old = {}; 4 5 //记住旧的样式,并插入新的样式 6 for ( name in options ) { 7 old[ name ] = elem.style[ name ]; 8 elem.style[ name ] = options[ name ]; 9 } 10 11 //执行回调并把指针指向dom元素 12 ret = callback.call( elem ); 13 14 //恢复旧的样式 15 for ( name in options ) { 16 elem.style[ name ] = old[ name ]; 17 } 18 19 return ret; 20 };
我们来做个例子试试看:
<style> #d1{width:100px;height:100px;background:red;display:none;} </style> <div id="d1"></div>
1 <script> 2 var swap = function( elem, options, callback ) { 3 var ret, name, 4 old = {}; 5 6 // Remember the old values, and insert the new ones 7 for ( name in options ) { 8 old[ name ] = elem.style[ name ]; 9 elem.style[ name ] = options[ name ]; 10 } 11 12 ret = callback.call( elem ); 13 14 // Revert the old values 15 for ( name in options ) { 16 elem.style[ name ] = old[ name ]; 17 } 18 19 return ret; 20 }; 21 22 var el = document.getElementById(‘d1‘); 23 swap(el,{‘display‘:‘block‘,‘visibility‘:‘hidden‘,‘position‘:‘absolute‘},function(){ 24 25 alert(el.offsetWidth); //100 26 27 }); 28 </script>
以上是关于当元素的样式为display:none时获取他的宽高的主要内容,如果未能解决你的问题,请参考以下文章
jQuery获取display为none的隐藏元素的宽度和高度的解决方案