毅窝疯

关于display:none元素的宽高获取问题

By hybnx 2019-05-21 JAVASCRIPT 来源:本站 访问:166

在做项目的时候碰到的这个问题,最后解决了,记录一下:

分几种情况:

1.正常情况
    <div style="width:500px; height:300px;">
        <div id="div1" style="width:100%; height:100%; background-color:red;">
            <div id="child" style="width:100%; height:100%; background-color:red; "></div>
        </div>
    </div>
1
2
3
4
5
    $(function(){
        console.log(document.getElementById("div1").scrollWidth); // 500
        console.log(document.getElementById("div1").scrollHeight); // 300
        console.log(document.getElementById("div1").offsetWidth); // 500
        console.log(document.getElementById("div1").offsetHeight); // 500
        console.log($("#div1").width()) // 500
        console.log($("#div1").height()) // 300
        console.log($("#child").width()) // 500
        console.log($("#child").height()) // 300
    })

2.父元素display:none
    <div style="width:500px; height:300px;display: none"><!-- 注意这里为none -->
        <div id="div1" style="width:100%; height:100%; background-color:red;">
            <div id="child" style="width:100%; height:100%; background-color:red; "></div>
        </div>
    </div>

上面的几种方法全都无法获取

3.父元素display:none,自身的长宽为具体值
    <div style="width:500px; height:300px;display: none">
    <!-- 注意这里为px -->
        <div id="div1" style="width:100px; height:100px; background-color:red;">
            <div id="child" style="width:100%; height:100%; background-color:red; "></div>
        </div>
    </div>

输出:
0
0
0
0
100 // 可以拿到具体值的长宽
100
0
0

4.自身display:none,且宽高为具体值
    <div style="width:500px; height:300px;">
        <div id="div1" style="width:100px; height:100px; background-color:red;display: none">
            <div id="child" style="width:100%; height:100%; background-color:red; "></div>
        </div>
    </div>

输出:
0
0
0
0
100 
100
0
0

5.自身display:none,宽高为百分比(此时width() height()获取了浏览器的宽高)
    <div style="width:500px; height:300px;">
        <div id="div1" style="width:100%; height:100%; background-color:red;display: none">
            <div id="child" style="width:100%; height:100%; background-color:red; "></div>
        </div>
    </div>

输出:
0
0
0
0
// 浏览器宽高
1920 
640
0
0

总结一下jquery的width()和height()方法就是
父元素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')
--------------------- 
作者:欣欣欣白白白 
来源:CSDN 
原文:https://blog.csdn.net/lqx_sunhan/article/details/79941665 
版权声明:本文为博主原创文章,转载请附上博文链接!