1. jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢工了。
  2.  
  3.   Chrome自带的开发工具一查,发现罢工的Tab中。小插件一些重要元素的宽度都变成“0”了,因为这个小插件需要计算动态宽度来实现,于是马上想到是小插件中的宽度获取失败了,果不其然。
  4.  
  5.   汗,居然一直没发现jQuery无法获取隐藏元素(display:none)的宽度(width)和高度(height),为了兼容IE6,我用1.x版,而且是官方最新的1.10.2版,不知道在2.x版中这个问题有没有解决。
  6.  
  7.   既然jQuery都不支持,那么Javascript也就肯定不支持了,网上搜索了一下,有个解决方案是用visibility:hidden来代替display:none,由于visibility:hidden占用物理空间,因此可以获取宽高。
  8.  
  9.   问题是这需要我去改动已经写好的Tab插件,这种拆东墙补西墙的事情,总会让人感觉不爽的。长时间搜索其它解决方案无果,就在我快要妥协的时候,突然眼前一亮,发现了个好东西:jQuery Actual
  10.  
  11.   可以说它几乎完美的解决了这个问题,而且使用方法极其简单,使用$('#someElement').actual('width')的方式来代替$('#someElement').width()就可以了,兼容性也十分出色,可以兼容IE6浏览器,压缩后体积只有1.1K也是一大亮点,更牛的是还支持innerouter的计算。
  12.  
  13. 官方信息
  1. jQuery版本要求
  2. jQuery 1.2.3+
  3.  
  4. 所兼容的浏览器
  • Firefox 2.0+
  • Internet Explorer 6+
  • Safari 3+
  • Opera 10.6+
  • Chrome 8+
  1.  
  2. 安装方法
  3. HTML文档需要声明DOCTYPE
  4. 引用JS文件即可
  5. <script type="text/javascript" src="path/jquery.min.js"></script>
  6. <script type="text/javascript" src="path/jquery.actual.js"></script>
  7. 使用方法
  8. 代码范例
  9. //get hidden element actual width
  10. $('.hidden').actual('width');
  11.  
  12. //get hidden element actual innerWidth
  13. $('.hidden').actual('innerWidth');
  14.  
  15. //get hidden element actual outerWidth
  16. $('.hidden').actual('outerWidth');
  17.  
  18. //get hidden element actual outerWidth and set the `includeMargin` argument
  19. $('.hidden').actual('outerWidth',{includeMargin:true});
  20.  
  21. //get hidden element actual height
  22. $('.hidden').actual('height');
  23.  
  24. //get hidden element actual innerHeight
  25. $('.hidden').actual('innerHeight');
  26.  
  27. //get hidden element actual outerHeight
  28. $('.hidden').actual('outerHeight');
  29.  
  30. // get hidden element actual outerHeight and set the `includeMargin` argument
  31. $('.hidden').actual('outerHeight',{includeMargin:true});
  32.  
  33. //if the page jumps or blinks, pass a attribute '{ absolute : true }'
  34. //be very careful, you might get a wrong result depends on how you makrup your html and css
  35. $('.hidden').actual('height',{absolute:true});
  36.  
  37. // if you use css3pie with a float element
  38. // for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
  39. // please see demo/css3pie in action
  40. $('.hidden').actual('width',{clone:true});
  41.  
  42.   个人觉得jQuery官方应该考虑将这个功能写进内核,那就更方便了。为了防止以后jQuery Actual的官网打不开(现在就时不时会和谐)或者下载不了,在这里存一份jquery.actual.js的源码,以备不时只需。
  43.  
  44. 源码:jquery.actual.js
  45.  
  46. ;( function ( $ ){
  47. $.fn.addBack = $.fn.addBack || $.fn.andSelf;
  48.  
  49. $.fn.extend({
  50.  
  51. actual : function ( method, options ){
  52. // check if the jQuery method exist
  53. if( !this[ method ]){
  54. throw '$.actual => The jQuery method "' + method + '" you called does not exist';
  55. }
  56.  
  57. var defaults = {
  58. absolute : false,
  59. clone : false,
  60. includeMargin : false
  61. };
  62.  
  63. var configs = $.extend( defaults, options );
  64.  
  65. var $target = this.eq( 0 );
  66. var fix, restore;
  67.  
  68. if( configs.clone === true ){
  69. fix = function (){
  70. var style = 'position: absolute !important; top: -1000 !important; ';
  71.  
  72. // this is useful with css3pie
  73. $target = $target.
  74. clone().
  75. attr( 'style', style ).
  76. appendTo( 'body' );
  77. };
  78.  
  79. restore = function (){
  80. // remove DOM element after getting the width
  81. $target.remove();
  82. };
  83. }else{
  84. var tmp = [];
  85. var style = '';
  86. var $hidden;
  87.  
  88. fix = function (){
  89. // get all hidden parents
  90. $hidden = $target.parents().addBack().filter( ':hidden' );
  91. style += 'visibility: hidden !important; display: block !important; ';
  92.  
  93. if( configs.absolute === true ) style += 'position: absolute !important; ';
  94.  
  95. // save the origin style props
  96. // set the hidden el css to be got the actual value later
  97. $hidden.each( function (){
  98. var $this = $( this );
  99.  
  100. // Save original style. If no style was set, attr() returns undefined
  101. tmp.push( $this.attr( 'style' ));
  102. $this.attr( 'style', style );
  103. });
  104. };
  105.  
  106. restore = function (){
  107. // restore origin style values
  108. $hidden.each( function ( i ){
  109. var $this = $( this );
  110. var _tmp = tmp[ i ];
  111.  
  112. if( _tmp === undefined ){
  113. $this.removeAttr( 'style' );
  114. }else{
  115. $this.attr( 'style', _tmp );
  116. }
  117. });
  118. };
  119. }
  120.  
  121. fix();
  122. // get the actual value with user specific methed
  123. // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
  124. // configs.includeMargin only works for 'outerWidth' and 'outerHeight'
  125. var actual = /(outer)/.test( method ) ?
  126. $target[ method ]( configs.includeMargin ) :
  127. $target[ method ]();
  128.  
  129. restore();
  130. // IMPORTANT, this plugin only return the value of the first element
  131. return actual;
  132. }
  133. });
  134. })( jQuery );

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

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

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

  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. OpenMPI源码剖析1:MPI_Init初探

    OpenMPI的底层实现: 我们知道,OpenMPI应用起来还是比较简单的,但是如果让我自己来实现一个MPI的并行计算,你会怎么设计呢?————这就涉及到比较底层的东西了. 回想起我们最简单的代码,通 ...

  2. 【未完】训练赛20190304:KMP+树状数组+线段树+优先队列

    头炸了啊,只做出L题,前两天刚看的Shawn zhou的博客学习的,幸亏看了啊,否则就爆零了,发现题目都是经典题,线段树,KMP,我都没看过,最近又在复习考研,真后悔大一大二没好好学习啊,得抽时间好好 ...

  3. 【主席树维护mex】 【SG函数递推】 Problem H. Cups and Beans 2017.8.11

    Problem H. Cups and Beans 2017.8.11 原题: There are N cups numbered 0 through N − 1. For each i(1 ≤ i ...

  4. python中spilt()函数和os.path.spilt()函数区别

    Python中有split()和os.path.split()两个函数: split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表. os.path.split():将文件 ...

  5. ZOJ 2532 Internship(最大流找关键割边)

    Description CIA headquarter collects data from across the country through its classified network. Th ...

  6. protected、public、private

    一.protected成员 1. 受保护的成员的可访问性 对于一个类的protected成员,①该类的用户(如类对象)不能访问它,②该类的派生类的成员(及其友元)可以访问它. 派生类的成员及其友元不能 ...

  7. Scrum1

    Scrum1 组员 任务分工 贡献 林泽宇 团队分工.撰写博客.修改完善需求规格说明书.整理代码规范 李涵 后端架构设计 尹海川 logo设计修改.数据库数据 郏敏杰 课堂展示.查阅资料.整理关键和难 ...

  8. 计算器软件实现系列(七)WPF+SQL+策略模式

    一  整体概述 本次设计主要是在WPF的页面中实现的,属于表现层的更换,数据库部分用的还是数据库的封装,其中引用了策略模式 二  设计思路 1 在出题页面,进行试题的编辑,在编辑后会自动保存到数据库中 ...

  9. UVALive - 6872 Restaurant Ratings 数位dp

    题目链接: http://acm.hust.edu.cn/vjudge/problem/113727 Restaurant Ratings Time Limit: 3000MS 题意 给你一个长度为n ...

  10. (转)Android SearchView 搜索框

    如果对这个效果感觉不错, 请往下看. 背景: 天气预报app, 本地数据库存储70个大中城市的基本信息, 根据用户输入的或通过搜索框选取的城市, 点击查询按钮后, 异步请求国家气象局数据, 得到返回的 ...