javascript获取隐藏dom的宽高 具体实现


Posted in Javascript onJuly 14, 2013

首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove。
具体代码如下:
Js代码

function getCss(elem, css){  
 if (window.getComputedStyle) {  
  return window.getComputedStyle(elem, null)[css];  
 }else if (elem.currentStyle) {  
  return elem.currentStyle[css];  
 }else {  
  return elem.style[css];  
 }  
}  
function getWH(dom){  
 var get = function(elem){  
  var wh = {};  
  'Width Height'.replace(/[^ ]+/g, function(i){  
   var a = i.toLowerCase();  
   wh[a] = elem['offset' + i] || elem['client' + i];  
  });  
  return wh;  
 };  
 if (getCss(dom, 'display') === 'none') {  
  var nDom = dom.cloneNode(true);  
  nDom.style.position = 'absolute';  
  nDom.style.top = '-3000px';  
  nDom.style.display = 'block';  
  document.getElementsByTagName('body')[0].appendChild(nDom);  
  var wh = get(nDom);  
  nDom.parentNode.removeChild(nDom);  
  return wh;  
 }   
 return get(dom);  
}  
//test   
console.log(getWH(document.getElementById('content')));  
var domA = document.createElement("a"), _ostyle = "position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;";  
domA.setAttribute("style", _ostyle);  
domA.style.cssText = _ostyle;  
domA.setAttribute("href", "javascript:void(0);");  
document.getElementsByTagName('body')[0].appendChild(o);  
console.log(getWH(domA)); 
function getCss(elem, css){
 if (window.getComputedStyle) {
  return window.getComputedStyle(elem, null)[css];
 }else if (elem.currentStyle) {
  return elem.currentStyle[css];
 }else {
  return elem.style[css];
 }
}
function getWH(dom){
 var get = function(elem){
  var wh = {};
  'Width Height'.replace(/[^ ]+/g, function(i){
   var a = i.toLowerCase();
   wh[a] = elem['offset' + i] || elem['client' + i];
  });
  return wh;
 };
 if (getCss(dom, 'display') === 'none') {
  var nDom = dom.cloneNode(true);
  nDom.style.position = 'absolute';
  nDom.style.top = '-3000px';
  nDom.style.display = 'block';
  document.getElementsByTagName('body')[0].appendChild(nDom);
  var wh = get(nDom);
  nDom.parentNode.removeChild(nDom);
  return wh;
 }
 return get(dom);
}
//test
console.log(getWH(document.getElementById('content')));
var domA = document.createElement("a"), _ostyle = "position:absolute;z-index:999999;width:92px;height:22px;position:absolute;display:none;";
domA.setAttribute("style", _ostyle);
domA.style.cssText = _ostyle;
domA.setAttribute("href", "javascript:void(0);");
document.getElementsByTagName('body')[0].appendChild(o);
console.log(getWH(domA));

还有其他更好的方法欢迎提出来。
Javascript 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
javascript网页关键字高亮代码
Jul 30 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
js和as的稳定传值问题解决
Jul 14 #Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 #Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 #Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 #Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 #Javascript
js confirm()方法的使用方法实例
Jul 13 #Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 #Javascript
You might like
php+ajax制作无刷新留言板
2015/10/27 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
php实现微信发红包功能
2018/07/13 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
python动态参数用法实例分析
2015/05/25 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
分享6个隐藏的python功能
2017/12/07 Python
python3爬虫之设计签名小程序
2018/06/19 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
详解python datetime模块
2020/08/17 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
Linux机考试题
2015/07/17 面试题
资料员岗位职责
2013/11/17 职场文书
养殖项目策划书范文
2014/01/13 职场文书
工人先进事迹材料
2014/12/26 职场文书
收银员岗位职责
2015/02/03 职场文书
办公室年度工作总结2015
2015/05/21 职场文书