jquery获取隐藏元素宽高错误的解决办法

jquery获取隐藏元素宽高错误

这几天在做tab切换这块，发现要获取切换的内容的宽高，得到隐藏元素的宽高总是错误的。于是便立即写了个demo测试下是哪里错误。

结构如下：

    

        
1
        
2
        
3
    
    

        

            span1
            span1
        
        

            span2
            span2
        
        

            span3
            span3
        
    

js：

 var p_height=$(this).outerHeight(true)
    var p_width=$(this).outerWidth(true)
    var _height = $(this).find('span').eq(0).outerHeight(true)
    var _height1 = $(this).find('span').eq(1).outerHeight(true)
    var _width = $(this).find('span').eq(0).outerWidth(true)
    var _width1 = $(this).find('span').eq(1).outerWidth(true)
    console.log(p_height,p_width);
    console.log(_height, _height1 , _width, _width1 );

测试下发现，

内部第一层p标签的宽高是对的，但是再往里面一层隐藏的span标签的宽高是错误的（已经转换成块元素）。网上搜索发现，这个是js的bug。

发现了一个解决办法jquery.actual.js官网

使用方法：

代码范例，使用如下写法即可。

$('.hidden').actual('width');

$('.hidden').actual('innerWidth');

$('.hidden').actual('outerWidth');

$('.hidden').actual('outerWidth',{includeMargin:true});

$('.hidden').actual('height');

$('.hidden').actual('innerHeight');

$('.hidden').actual('outerHeight');

$('.hidden').actual('outerHeight',{includeMargin:true});

由于主站服务器不稳定，经常打不开，所以将js保存下来点我