JS无法获取display为none的隐藏元素的宽度和高度的解决方案
在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素。
可使用jQuery Actual Plugin插件来完成,其源码如下:
;( 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,
display : 'block'
}; 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: ' + configs.display + ' !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 (){
// Save original style. If no style was set, attr() returns undefined
var $this = $( this );
var thisStyle = $this.attr( 'style' ); tmp.push( thisStyle );
// Retain as much of the original style as possible, if there is one
$this.attr( 'style', thisStyle ? thisStyle + ';' + 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 ( factory ) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register module depending on jQuery using requirejs define.
define( ['jquery'], factory );
} else {
// No AMD.
factory( jQuery );
}
}( 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,
display : 'block'
}; 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: ' + configs.display + ' !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 (){
// Save original style. If no style was set, attr() returns undefined
var $this = $( this );
var thisStyle = $this.attr( 'style' ); tmp.push( thisStyle );
// Retain as much of the original style as possible, if there is one
$this.attr( 'style', thisStyle ? thisStyle + ';' + 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;
}
});
}));
代码实例:
//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});
插件地址:http://dreamerslab.com/works
JS无法获取display为none的隐藏元素的宽度和高度的解决方案的更多相关文章
- JS获取display为none的隐藏元素的宽度和高度的解决方案
有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案 <h ...
- jQuery获取display为none的隐藏元素的宽度和高度的解决方案
1.利用给元素添加行内样式:visibility:hidden;display:block 2.让隐藏元素变成有物理尺寸存在,但不可见,获取元素宽高 3.再给它还原成display为none,去除vi ...
- Js中获取显示器、浏览器以及窗口等的宽度与高度的方法
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- 获取display:none的元素的宽度和高度
display为none的元素不能通过offsetWidth和offsetHeight来获取宽高(未参与css渲染), 解决方案:可以通过在display为none的元素使用行内样式style设置宽高 ...
- js 冒泡事件 点击任意地方隐藏元素
$(function () { $("#but").click(function (e) {// $();//显示速度 /*阻止冒泡事件*/ e = window.event || ...
- js正则获取html字符串指定的dom元素和内容
var str = "<div>111<p id='abc'>3333</p></div><div>222<div id=' ...
- js滚动到指定位置显示或隐藏元素
$(function(){ $(window).scroll(function(){ var scroll_top=$(window).scrollTop(); console.log(scroll_ ...
随机推荐
- H5内联视频总结
概述 之前写过h5内联视频,总结了一下当时做微信视频类h5的心得,随着工作中越来越多的接触h5,我有了更多的心得与经验,记下来供以后开发时参考,相信对其他人也有用. 内联视频的播放 内联视频需要用户主 ...
- java核心技术-(总结自杨晓峰-java核心技术36讲)
1. 谈谈你对java平台的理解 首先是java最显著的两个特性,一次写入处处运行:还有垃圾收集器gc,gc能够对java内存进行管理回收,程序员不需要关心内存的分配和回收问题 然后谈谈jre和jdk ...
- Static了解和复习继承。
Static了解 static加在局部变量的前面改变其存储类型使之成为静态局部变量,会延长它的生存周期,但是不会改变其作用域. 静态成员是属于类的,而不是属于某个对象的.即便没有任何一个实例,类的静态 ...
- Ubuntu 18.04基础软件安装
1.fcitx 这个应该是最基础的了,虽然系统自带的也有,不过说实话可能是我还不会配置,我觉得是不好用,坚持用了一周后还是换回了小企鹅,最初是装小企鹅时失败了被迫坚持用了一周,当时失败情况是这样的,使 ...
- 【干货】Jquery.Datables与Bootstrap3的组合使用
官方地址 datatables官方网址:www.datatables.net 下载bootstrap3与datables文件包 引用文件 css:bootstrap.css.dataTables.bo ...
- web进修之—Hibernate 继承映射(5)
先看三个类的继承关系,Payment是父类,CashPayment和CreditCardPayment是Payment的子类: view plaincopy to clipboardprint p ...
- python装饰器1:函数装饰器详解
装饰器1:函数装饰器 装饰器2:类装饰器 装饰器3:进阶 先混个眼熟 谁可以作为装饰器(可以将谁编写成装饰器): 函数 方法 实现了__call__的可调用类 装饰器可以去装饰谁(谁可以被装饰): 函 ...
- HBase的java客户端测试(二)---DML操作
测试准备 [首先同步时间:] for node in CloudDeskTop master01 master02 slave01 slave02 slave03;do ssh $node " ...
- 南大算法设计与分析课程复习笔记(2)L2 - Asymptotics
一.几种比较复杂度的符号 数据结构有描述,相关严格数学定义也不想说了,就这么过了吧. 二.最大子数组的几种解决方法 从最复杂的暴力解法过渡到最简单的动态规划 解析和代码见这里:http://www.c ...
- AngularJs_自定义注入对象_笔记1
A-自定义控件示例: 我的自定义控件文件为:angular-seagull2-common.js (function (window, angular) { 'use strict'; $urlPro ...