js获取隐藏元素宽高的实现方法


Posted in Javascript onMay 19, 2016

网上有一些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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
jquery实现无刷新验证码的简单实例
May 19 #Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 #Javascript
JavaScript:Array类型全面解析
May 19 #Javascript
JavaScript:Date类型全面解析
May 19 #Javascript
javascript中对Date类型的常用操作小结
May 19 #Javascript
JS Attribute属性操作详解
May 19 #Javascript
jQuery点击输入框显示验证码图片
May 19 #Javascript
You might like
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
简单的js分页脚本
2009/05/21 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
react-router中的属性详解
2017/06/01 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
python检测某个变量是否有定义的方法
2015/05/20 Python
Python使用turtule画五角星的方法
2015/07/09 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python解析xml简单示例
2019/06/21 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
农民工创业典型事迹
2014/01/25 职场文书
高中生家长寄语大全
2014/04/03 职场文书
计算机毕业生求职信
2014/06/10 职场文书
预备党员转正材料
2014/12/19 职场文书
就业推荐表导师评语
2014/12/31 职场文书
护士个人年度总结范文
2015/02/13 职场文书
学生逃课检讨书
2015/02/17 职场文书
博士给导师的自荐信
2015/03/06 职场文书
MySQL锁机制
2021/04/05 MySQL
只用Python就可以制作的简单词云
2021/06/07 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers