js获取隐藏元素宽高的实现方法
网上有一些js获取隐藏元素宽高的方法，但是可能会存在某些情况获取不了。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>test</title>
</head>
<body>
<div id="test" style="display:none">
我有一壶酒，足以慰风尘。尽倾江海里，赠饮天下人。
</div>
<div id="test2" style="display:none">
<div style="display:none">
<div id="test2_child">
我有一壶酒，足以慰风尘。尽倾江海里，赠饮天下人。
</div>
</div>
</div>
<div id="test3">
<div>
<div id="test3_child">
我有一壶酒，足以慰风尘。尽倾江海里，赠饮天下人。
</div>
</div>
</div>
</div>
</body>
</html>
test获取得了，但是test2_child是获取不到的。鉴于这种情况，于是自己写了一个方法解决。
解决思路：
1. 获取元素（拿宽高那个）所有隐藏的祖先元素直到body元素，包括自己。
2. 获取所有隐藏元素的style的display、visibility 属性，保存下来。
3. 设置所有隐藏元素为 visibility:hidden;display:block !important;（之所以要important是避免优先级不够）。
4. 获取元素（拿宽高那个）的宽高。
5. 恢复所有隐藏元素的style的display、visibility 属性。
6. 返回元素宽高值。
代码实现：
function getSize(id){
var width,
height,
elem = document.getElementById(id),
noneNodes = [],
nodeStyle = [];
getNoneNode(elem); //获取多层display：none;的元素
setNodeStyle();
width = elem.clientWidth;
height = elem.clientHeight;
resumeNodeStyle();
return {
width : width,
height : height
}
function getNoneNode(node){
var display = getStyles(node).getPropertyValue('display'),
tagName = node.nodeName.toLowerCase();
if(display != 'none'
&& tagName != 'body'){
getNoneNode(node.parentNode);
} else {
noneNodes.push(node);
if(tagName != 'body')
getNoneNode(node.parentNode);
}
}
//这方法才能获取最终是否有display属性设置，不能style.display。
function getStyles(elem) {
// Support: IE<=11+, Firefox<=30+ (#15098, #14150)
// IE throws on elements created in popups
// FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
var view = elem.ownerDocument.defaultView;
if (!view || !view.opener) {
view = window;
}
return view.getComputedStyle(elem);
};
function setNodeStyle(){
var i = 0;
for(; i < noneNodes.length; i++){
var visibility = noneNodes[i].style.visibility,
display = noneNodes[i].style.display,
style = noneNodes[i].getAttribute("style");
//覆盖其他display样式
noneNodes[i].setAttribute("style", "visibility:hidden;display:block !important;" + style);
nodeStyle[i] = {
visibility :visibility,
display : display
}
}
}
function resumeNodeStyle(){
var i = 0;
for(; i < noneNodes.length; i++){
noneNodes[i].style.visibility = nodeStyle[i].visibility;
noneNodes[i].style.display = nodeStyle[i].display;
}
}
}
例子演示：
var testSize = getSize('test');
console.log("test-> width:" + testSize.width + " height:" + testSize.height);
var test2ChildSize2 = getSize('test2_child');
console.log("test2Child2-> width:" + test2ChildSize2.width + " height:" + test2ChildSize2.height);
var test3ChildSize = getSize('test3_child');
console.log("test3_child-> width:" + test3ChildSize.width + " height:" + test3ChildSize.height);
//打印值如下
test-> width:417 height:18
test2Child2-> width:417 height:18
test3_child-> width:417 height:18
注意事项：
1. 打开显示所有隐藏祖先元素，然后获取元素的宽高值，可能在某些情况下获取值是不正确的。
PS：不过这个不用担心，真正出错时再hack方法就行。
2. 之所以要保存隐藏祖先元素display、visibility 属性，是为了后面可以设置回来，不影响其本身。
3. 另外getStyles方法是从jquery源码中摘取出来，这方法才能获取最终是否有display属性设置。
PS：不能从style.display获取。
以上这篇js获取隐藏元素宽高的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
javascript获取隐藏元素(display:none)的高度和宽度的方法
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 复制代码 代码如下: function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象.样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];} 但是如果这个元素是隐藏(dis
-
JavaScript 关于元素获取焦点(隐藏元素与div)
1,隐藏元素无法获取焦点 2,对于div等特殊元素获取焦点 关于元素获取焦点 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 关于元素获取焦点: 1,隐藏元素无法获取焦点 下面有个隐藏的Input: 解决方法:先把元素显示,在获取焦点. 2,对于div等特殊元素获取焦点 我
-
js获取隐藏元素的宽高
获取隐藏元素(display:none)的物理尺寸 问题及场景 假如我们有这样一个输入框,点击能展开选择.如下图: 在这里输入框和下方的展开区域是分离的,独立的两个控件!初始状态下面的可选框是隐藏的(ng-show=false) 展开区域中可折叠组件accordion(对应图中省份,排序字段,短消息部分)的高度是随着数据自适应撑开,点击accordion折叠收缩时有一个高度变化的动画效果! 在计算accordion的高度时却无法获取数据节点元素的高度,导致accordion的高度为0,无法折叠!
-
js获取隐藏元素宽高的实现方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo
-
JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 复制代码 代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码 代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs
-
Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_
-
解决vue项目获取dom元素宽高总是不准确问题
dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(
-
JS获取html元素的标记名实现方法
常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. getElementsBy
-
js 获取屏幕各种宽高的方法(浏览器兼容)
屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网
-
android获取屏幕宽高与获取控件宽高(三种方法)
1.获取屏幕宽高 方法1: int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px) int screenHeight = getWindowManager().getDefaultDisplay().getHeight(); // 屏幕高(像素,如:800p) Log.e(TAG + " getDefaultDisplay", "screenWidth=&q
-
Android获取设备屏幕宽高pix值的方法
本篇文章主要介绍了Android获取设备屏幕宽高pix值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法一: WindowManager wm = (WindowManager) this .getSystemService(Context.WINDOW_SERVICE); int width = wm.getDefaultDisplay().getWidth(); int height = wm.getDefaultDisplay().getHeight