在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢工了。

 
  用Chrome自带的开发工具一查,发现罢工的Tab中。小插件一些重要元素的宽度都变成“0”了,因为这个小插件需要计算动态宽度来实现,于是马上想到是小插件中的宽度获取失败了,果不其然。
 
  汗,居然一直没发现jQuery无法获取隐藏元素(display:none)的宽度(width)和高度(height),为了兼容IE6,我用1.x版,而且是官方最新的1.10.2版,不知道在2.x版中这个问题有没有解决。
 
  既然jQuery都不支持,那么Javascript也就肯定不支持了,网上搜索了一下,有个解决方案是用visibility:hidden来代替display:none,由于visibility:hidden占用物理空间,因此可以获取宽高。
 
  问题是这需要我去改动已经写好的Tab插件,这种拆东墙补西墙的事情,总会让人感觉不爽的。长时间搜索其它解决方案无果,就在我快要妥协的时候,突然眼前一亮,发现了个好东西:jQuery Actual
 
  可以说它几乎完美的解决了这个问题,而且使用方法极其简单,使用$('#someElement').actual('width')的方式来代替$('#someElement').width()就可以了,兼容性也十分出色,可以兼容IE6浏览器,压缩后体积只有1.1K也是一大亮点,更牛的是还支持inner和outer的计算。
官方信息
 
jQuery版本要求
  • jQuery 1.2.3+
 
所兼容的浏览器
  • Firefox 2.0+
  • Internet Explorer 6+
  • Safari 3+
  • Opera 10.6+
  • Chrome 8+
安装方法
  • HTML文档需要声明DOCTYPE
  • 引用JS文件即可
    1. <script type="text/javascript" src="path/jquery.min.js"></script>
    2. <script type="text/javascript" src="path/jquery.actual.js"></script>
使用方法
  • 代码范例
    1. //get hidden element actual width
    2. $('.hidden').actual('width');
    3.  
    4. //get hidden element actual innerWidth
    5. $('.hidden').actual('innerWidth');
    6.  
    7. //get hidden element actual outerWidth
    8. $('.hidden').actual('outerWidth');
    9.  
    10. //get hidden element actual outerWidth and set the `includeMargin` argument
    11. $('.hidden').actual('outerWidth',{includeMargin:true});
    12.  
    13. //get hidden element actual height
    14. $('.hidden').actual('height');
    15.  
    16. //get hidden element actual innerHeight
    17. $('.hidden').actual('innerHeight');
    18.  
    19. //get hidden element actual outerHeight
    20. $('.hidden').actual('outerHeight');
    21.  
    22. // get hidden element actual outerHeight and set the `includeMargin` argument
    23. $('.hidden').actual('outerHeight',{includeMargin:true});
    24.  
    25. //if the page jumps or blinks, pass a attribute '{ absolute : true }'
    26. //be very careful, you might get a wrong result depends on how you makrup your html and css
    27. $('.hidden').actual('height',{absolute:true});
    28.  
    29. // if you use css3pie with a float element
    30. // for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
    31. // please see demo/css3pie in action
    32. $('.hidden').actual('width',{clone:true});

    个人觉得jQuery官方应该考虑将这个功能写进内核,那就更方便了。为了防止以后jQuery Actual的官网打不开(现在就时不时会和谐)或者下载不了,在这里存一份jquery.actual.js的源码,以备不时只需。

  • 源码:jquery.actual.js

    1. ;( function ( $ ){
    2. $.fn.addBack = $.fn.addBack || $.fn.andSelf;
    3.  
    4. $.fn.extend({
    5.  
    6. actual : function ( method, options ){
    7. // check if the jQuery method exist
    8. if( !this[ method ]){
    9. throw '$.actual => The jQuery method "' + method + '" you called does not exist';
    10. }
    11.  
    12. var defaults = {
    13. absolute : false,
    14. clone : false,
    15. includeMargin : false
    16. };
    17.  
    18. var configs = $.extend( defaults, options );
    19.  
    20. var $target = this.eq( 0 );
    21. var fix, restore;
    22.  
    23. if( configs.clone === true ){
    24. fix = function (){
    25. var style = 'position: absolute !important; top: -1000 !important; ';
    26.  
    27. // this is useful with css3pie
    28. $target = $target.
    29. clone().
    30. attr( 'style', style ).
    31. appendTo( 'body' );
    32. };
    33.  
    34. restore = function (){
    35. // remove DOM element after getting the width
    36. $target.remove();
    37. };
    38. }else{
    39. var tmp = [];
    40. var style = '';
    41. var $hidden;
    42.  
    43. fix = function (){
    44. // get all hidden parents
    45. $hidden = $target.parents().addBack().filter( ':hidden' );
    46. style += 'visibility: hidden !important; display: block !important; ';
    47.  
    48. if( configs.absolute === true ) style += 'position: absolute !important; ';
    49.  
    50. // save the origin style props
    51. // set the hidden el css to be got the actual value later
    52. $hidden.each( function (){
    53. var $this = $( this );
    54.  
    55. // Save original style. If no style was set, attr() returns undefined
    56. tmp.push( $this.attr( 'style' ));
    57. $this.attr( 'style', style );
    58. });
    59. };
    60.  
    61. restore = function (){
    62. // restore origin style values
    63. $hidden.each( function ( i ){
    64. var $this = $( this );
    65. var _tmp = tmp[ i ];
    66.  
    67. if( _tmp === undefined ){
    68. $this.removeAttr( 'style' );
    69. }else{
    70. $this.attr( 'style', _tmp );
    71. }
    72. });
    73. };
    74. }
    75.  
    76. fix();
    77. // get the actual value with user specific methed
    78. // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
    79. // configs.includeMargin only works for 'outerWidth' and 'outerHeight'
    80. var actual = /(outer)/.test( method ) ?
    81. $target[ method ]( configs.includeMargin ) :
    82. $target[ method ]();
    83.  
    84. restore();
    85. // IMPORTANT, this plugin only return the value of the first element
    86. return actual;
    87. }
    88. });
    89. })( jQuery );

    此上是转载别人的文章。

  • 此外我还发现,如果觉得上述方法未曾听过或者不知道,但是要知道原因,为什么会取不到高度,这是今天一直困扰我的问题。因为我在获取高度之前,对前面的元素添加了隐藏的动作,我用的是hide(),但是在页面的标签上就会形成display:none;这个动作,所以之后我再取值就得不到了。读了上述之后,瞬间明白。jQuery无法获取隐藏元素(display:none)的宽度(width)和高度(height),解决方案是用visibility:hidden来代替display:none,由于visibility:hidden占用物理空间,因此可以获取宽高。

[jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案的更多相关文章

  1. jQuery无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

    用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢工了. 用Chrome自带的开发工具一查,发现罢工 ...

  2. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  3. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  4. selenium+python自动化104-如何获取隐藏元素text文本

    前言 首先 selenium 是可以定位到隐藏元素的,但是 selenium 不能跟隐藏元素交互,也就是隐藏元素element不能使用element.click()方法. 隐藏元素element.te ...

  5. 转:Jquery如何获取某个元素前(后)的文本内容?

    原文:[解决]Jquery如何获取某个元素前(后)的文本内容? <span> text here... <a id="target_element">百万创 ...

  6. 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  7. [SoapUI]怎样获取隐藏元素的文本内容Get text of hidden element

    隐藏元素无法通过gettext()获取其文本内容,须用javascript来获取 String actualDataPointName = (String) ((JavascriptExecutor) ...

  8. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...

  9. jquery中获取相邻元素相关的命令:next()、prev()和siblings()

    jquery里我们要获取某个元素的相邻元素时,可以用到的命令有三个: next():用来获取下一个同辈元素. prev():用来获取上一个同辈元素. siblings():用来获取所有的同辈元素. 下 ...

随机推荐

  1. Can you find it?(二分 二分+STL set map)

    Can you find it? Time Limit : 10000/3000ms (Java/Other)   Memory Limit : 32768/10000K (Java/Other) T ...

  2. 谱聚类--SpectralClustering

    谱聚类通常会先对两两样本间求相似度. 然后依据相似度矩阵求出拉普拉斯矩阵,然后将每一个样本映射到拉普拉斯矩阵特诊向量中,最后使用k-means聚类. scikit-learn开源包中已经有现成的接口能 ...

  3. mysql 5.7忘记密码处理

    vi /etc/my.cnf在[mysqld]下面增加一行skip-grant-tables 重启  /etc/init.d/mysqld restart /usr/local/mysql/bin/m ...

  4. nodejs 计算内存使用率

    //计算内存使用率 function calcMem(){ let mem_total = os.totalmem(), mem_free = os.freemem(), mem_used = mem ...

  5. WPF中当鼠标移到按钮上时,按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

  6. linux重要的标准目录和文件

    linux重要的标准目录和文件 / 根目录,所有其他文件在根文件系统的子目录下 /bin 基本命令的二进制文件,存放linux下常用的命令和工具 /boot 引导加载器的固有文件,linux就是从这里 ...

  7. C#.NET面向对象(语法点)

    一.继承 C#中继承的规则 1:继承是可传递的 A:B   B:C 2:派生类应当是对基类的扩展.派生类可以添加新的成员,但不能除去已经继承的成员的定义. 3:构造函数和析构函数不能被继承 4:如果派 ...

  8. Python和C#基本算法实现对比

    最近在学习python,很多入门的例子又写了一遍,基本上是C#和Python都写了一遍,对比发现语言真是相通啊,只是语法不同而已. python开发也是用的VS,很好用,特别是代码段运行,选中一段py ...

  9. Emgu学习笔记(一)安装及运行Sample

    1.简单说明 Emgu是Dot Net平台对OpenCV的封装,本质上没有增加新功能,是通过Dot Net的平台调用技术直接调用OpenCV C++语言写的库,使用我们可以方便用.net平台通过Ope ...

  10. delete、update忘加where条件误操作恢复过程演示

    update.delete没有带where条件,误操作,如何恢复呢? 我现在有一张学生表,我要把小于60更新成不及格. mysql> select * from student; +----+- ...