zoukankan      html  css  js  c++  java
  • 当元素的样式为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>
  • 相关阅读:
    Git上手:四种常见的Git协同工作方式
    Git上手:Git扫盲区
    理解web缓存
    浅谈对技术债的理解
    保护个人隐私,从我做起
    cookie注意事项
    了解JavaScript核心精髓(二)
    简单实现nodejs爬虫工具
    浅谈我所见的CSS组织风格
    利用正则表达式清除多余的空行
  • 原文地址:https://www.cnblogs.com/gongshunkai/p/5836694.html
Copyright © 2011-2022 走看看