zoukankan      html  css  js  c++  java
  • 父级display:none获取子元素宽的问题

    父元素display:none时,如果子元素的长宽为具体值,可以获取到,如果为百分比,获取不到。父元素display不为none时,如果子元素长宽为具体值,可以获取,为百分比时,获取的是body的长宽

    那就需要解决办法了,这个时候有个jquery的插件大家可以用jquery.actual.js,他可以让你获取隐藏元素的长宽

    ;( function ( $ ){
        $.fn.addBack = $.fn.addBack || $.fn.andSelf;
    
        $.fn.extend({
    
            actual : function ( method, options ){
                // check if the jQuery method exist
                if( !this[ method ]){
                    throw '$.actual => The jQuery method "' + method + '" you called does not exist';
                }
    
                var defaults = {
                    absolute      : false,
                    clone         : false,
                    includeMargin : false
                };
    
                var configs = $.extend( defaults, options );
    
                var $target = this.eq( 0 );
                var fix, restore;
    
                if( configs.clone === true ){
                    fix = function (){
                        var style = 'position: absolute !important; top: -1000 !important; ';
    
                        // this is useful with css3pie
                        $target = $target.
                        clone().
                        attr( 'style', style ).
                        appendTo( 'body' );
                    };
    
                    restore = function (){
                        // remove DOM element after getting the width
                        $target.remove();
                    };
                }else{
                    var tmp   = [];
                    var style = '';
                    var $hidden;
    
                    fix = function (){
                        // get all hidden parents
                        $hidden = $target.parents().addBack().filter( ':hidden' );
                        style   += 'visibility: hidden !important; display: block !important; ';
    
                        if( configs.absolute === true ) style += 'position: absolute !important; ';
    
                        // save the origin style props
                        // set the hidden el css to be got the actual value later
                        $hidden.each( function (){
                            var $this = $( this );
    
                            // Save original style. If no style was set, attr() returns undefined
                            tmp.push( $this.attr( 'style' ));
                            $this.attr( 'style', style );
                        });
                    };
    
                    restore = function (){
                        // restore origin style values
                        $hidden.each( function ( i ){
                            var $this = $( this );
                            var _tmp  = tmp[ i ];
    
                            if( _tmp === undefined ){
                                $this.removeAttr( 'style' );
                            }else{
                                $this.attr( 'style', _tmp );
                            }
                        });
                    };
                }
    
                fix();
                // get the actual value with user specific methed
                // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
                // configs.includeMargin only works for 'outerWidth' and 'outerHeight'
                var actual = /(outer)/.test( method ) ?
                    $target[ method ]( configs.includeMargin ) :
                    $target[ method ]();
    
                restore();
                // IMPORTANT, this plugin only return the value of the first element
                return actual;
            }
        });
    })( jQuery );
    

      

    用法:

    $("#id").actual('height')
    $("#id").actual('width')
    

      

  • 相关阅读:
    Algorithm Gossip (48) 上三角、下三角、对称矩阵
    .Algorithm Gossip (47) 多维矩阵转一维矩阵
    Algorithm Gossip (46) 稀疏矩阵存储
    Algorithm Gossip (45) 费氏搜寻法
    Algorithm Gossip (44) 插补搜寻法
    Algorithm Gossip (43) 二分搜寻法
    Algorithm Gossip (42) 循序搜寻法(使用卫兵)
    Algorithm Gossip (41) 基数排序法
    Algorithm Gossip (40) 合并排序法
    AlgorithmGossip (39) 快速排序法 ( 三 )
  • 原文地址:https://www.cnblogs.com/ZLHF/p/10912429.html
Copyright © 2011-2022 走看看