当元素的样式为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的隐藏元素的宽度和高度的解决方案

如何获取隐藏元素的宽高

当另一个元素(类)为 display:none 时隐藏 .innerHTML; [关闭]

JQuery中的DOM动画

无法测试样式显示的元素:无

display:none和visiblity:hidden区别