jQuery无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
- 用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文件即可
- <script type="text/javascript" src="path/jquery.min.js"></script>
- <script type="text/javascript" src="path/jquery.actual.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的源码,以备不时只需。
- 源码: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 );
jQuery无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案的更多相关文章
- [jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案
在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...
- 使用 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():用来获取所有的同辈元素. 下 ...
随机推荐
- OpenMPI源码剖析1:MPI_Init初探
OpenMPI的底层实现: 我们知道,OpenMPI应用起来还是比较简单的,但是如果让我自己来实现一个MPI的并行计算,你会怎么设计呢?————这就涉及到比较底层的东西了. 回想起我们最简单的代码,通 ...
- 【未完】训练赛20190304:KMP+树状数组+线段树+优先队列
头炸了啊,只做出L题,前两天刚看的Shawn zhou的博客学习的,幸亏看了啊,否则就爆零了,发现题目都是经典题,线段树,KMP,我都没看过,最近又在复习考研,真后悔大一大二没好好学习啊,得抽时间好好 ...
- 【主席树维护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 ...
- python中spilt()函数和os.path.spilt()函数区别
Python中有split()和os.path.split()两个函数: split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表. os.path.split():将文件 ...
- ZOJ 2532 Internship(最大流找关键割边)
Description CIA headquarter collects data from across the country through its classified network. Th ...
- protected、public、private
一.protected成员 1. 受保护的成员的可访问性 对于一个类的protected成员,①该类的用户(如类对象)不能访问它,②该类的派生类的成员(及其友元)可以访问它. 派生类的成员及其友元不能 ...
- Scrum1
Scrum1 组员 任务分工 贡献 林泽宇 团队分工.撰写博客.修改完善需求规格说明书.整理代码规范 李涵 后端架构设计 尹海川 logo设计修改.数据库数据 郏敏杰 课堂展示.查阅资料.整理关键和难 ...
- 计算器软件实现系列(七)WPF+SQL+策略模式
一 整体概述 本次设计主要是在WPF的页面中实现的,属于表现层的更换,数据库部分用的还是数据库的封装,其中引用了策略模式 二 设计思路 1 在出题页面,进行试题的编辑,在编辑后会自动保存到数据库中 ...
- UVALive - 6872 Restaurant Ratings 数位dp
题目链接: http://acm.hust.edu.cn/vjudge/problem/113727 Restaurant Ratings Time Limit: 3000MS 题意 给你一个长度为n ...
- (转)Android SearchView 搜索框
如果对这个效果感觉不错, 请往下看. 背景: 天气预报app, 本地数据库存储70个大中城市的基本信息, 根据用户输入的或通过搜索框选取的城市, 点击查询按钮后, 异步请求国家气象局数据, 得到返回的 ...