[jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢工了。
- jQuery 1.2.3+
- Firefox 2.0+
- Internet Explorer 6+
- Safari 3+
- Opera 10.6+
- Chrome 8+
- HTML文档需要声明DOCTYPE
- 引用JS文件即可
- <script type="text/javascript" src="path/jquery.min.js"></script>
- <script type="text/javascript" src="path/jquery.actual.js"></script>
- <script type="text/javascript" src="path/jquery.min.js"></script>
- 代码范例
- //get hidden element actual width
- $('.hidden').actual('width');
- //get hidden element actual innerWidth
- $('.hidden').actual('innerWidth');
- //get hidden element actual outerWidth
- $('.hidden').actual('outerWidth');
- //get hidden element actual outerWidth and set the `includeMargin` argument
- $('.hidden').actual('outerWidth',{includeMargin:true});
- //get hidden element actual height
- $('.hidden').actual('height');
- //get hidden element actual innerHeight
- $('.hidden').actual('innerHeight');
- //get hidden element actual outerHeight
- $('.hidden').actual('outerHeight');
- // get hidden element actual outerHeight and set the `includeMargin` argument
- $('.hidden').actual('outerHeight',{includeMargin:true});
- //if the page jumps or blinks, pass a attribute '{ absolute : true }'
- //be very careful, you might get a wrong result depends on how you makrup your html and css
- $('.hidden').actual('height',{absolute:true});
- // if you use css3pie with a float element
- // for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
- // please see demo/css3pie in action
- $('.hidden').actual('width',{clone:true});
个人觉得jQuery官方应该考虑将这个功能写进内核,那就更方便了。为了防止以后jQuery Actual的官网打不开(现在就时不时会和谐)或者下载不了,在这里存一份jquery.actual.js的源码,以备不时只需。
- //get hidden element actual width
源码: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 );
此上是转载别人的文章。
- ;( function ( $ ){
- 此外我还发现,如果觉得上述方法未曾听过或者不知道,但是要知道原因,为什么会取不到高度,这是今天一直困扰我的问题。因为我在获取高度之前,对前面的元素添加了隐藏的动作,我用的是hide(),但是在页面的标签上就会形成display:none;这个动作,所以之后我再取值就得不到了。读了上述之后,瞬间明白。jQuery无法获取隐藏元素(display:none)的宽度(width)和高度(height),解决方案是用visibility:hidden来代替display:none,由于visibility:hidden占用物理空间,因此可以获取宽高。
[jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案的更多相关文章
- jQuery无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢工了. 用Chrome自带的开发工具一查,发现罢工 ...
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- selenium+python自动化104-如何获取隐藏元素text文本
前言 首先 selenium 是可以定位到隐藏元素的,但是 selenium 不能跟隐藏元素交互,也就是隐藏元素element不能使用element.click()方法. 隐藏元素element.te ...
- 转:Jquery如何获取某个元素前(后)的文本内容?
原文:[解决]Jquery如何获取某个元素前(后)的文本内容? <span> text here... <a id="target_element">百万创 ...
- 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- [SoapUI]怎样获取隐藏元素的文本内容Get text of hidden element
隐藏元素无法通过gettext()获取其文本内容,须用javascript来获取 String actualDataPointName = (String) ((JavascriptExecutor) ...
- JavaScript获取html元素的实际宽度和高度
一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...
- jquery中获取相邻元素相关的命令:next()、prev()和siblings()
jquery里我们要获取某个元素的相邻元素时,可以用到的命令有三个: next():用来获取下一个同辈元素. prev():用来获取上一个同辈元素. siblings():用来获取所有的同辈元素. 下 ...
随机推荐
- Can you find it?(二分 二分+STL set map)
Can you find it? Time Limit : 10000/3000ms (Java/Other) Memory Limit : 32768/10000K (Java/Other) T ...
- 谱聚类--SpectralClustering
谱聚类通常会先对两两样本间求相似度. 然后依据相似度矩阵求出拉普拉斯矩阵,然后将每一个样本映射到拉普拉斯矩阵特诊向量中,最后使用k-means聚类. scikit-learn开源包中已经有现成的接口能 ...
- mysql 5.7忘记密码处理
vi /etc/my.cnf在[mysqld]下面增加一行skip-grant-tables 重启 /etc/init.d/mysqld restart /usr/local/mysql/bin/m ...
- nodejs 计算内存使用率
//计算内存使用率 function calcMem(){ let mem_total = os.totalmem(), mem_free = os.freemem(), mem_used = mem ...
- WPF中当鼠标移到按钮上时,按钮的背景图片消失的问题
如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...
- linux重要的标准目录和文件
linux重要的标准目录和文件 / 根目录,所有其他文件在根文件系统的子目录下 /bin 基本命令的二进制文件,存放linux下常用的命令和工具 /boot 引导加载器的固有文件,linux就是从这里 ...
- C#.NET面向对象(语法点)
一.继承 C#中继承的规则 1:继承是可传递的 A:B B:C 2:派生类应当是对基类的扩展.派生类可以添加新的成员,但不能除去已经继承的成员的定义. 3:构造函数和析构函数不能被继承 4:如果派 ...
- Python和C#基本算法实现对比
最近在学习python,很多入门的例子又写了一遍,基本上是C#和Python都写了一遍,对比发现语言真是相通啊,只是语法不同而已. python开发也是用的VS,很好用,特别是代码段运行,选中一段py ...
- Emgu学习笔记(一)安装及运行Sample
1.简单说明 Emgu是Dot Net平台对OpenCV的封装,本质上没有增加新功能,是通过Dot Net的平台调用技术直接调用OpenCV C++语言写的库,使用我们可以方便用.net平台通过Ope ...
- delete、update忘加where条件误操作恢复过程演示
update.delete没有带where条件,误操作,如何恢复呢? 我现在有一张学生表,我要把小于60更新成不及格. mysql> select * from student; +----+- ...