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 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Vue常用指令详解分析
Aug 19 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 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下过滤HTML代码的函数
2007/12/10 PHP
PHP循环结构实例讲解
2014/02/10 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
PHP中的self关键字详解
2019/06/23 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
javascript版2048小游戏
2015/03/18 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
老生常谈python之鸭子类和多态
2017/06/13 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
浅析Python四种数据类型
2018/09/26 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
自考生自我评价分享
2014/01/18 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
处理canvas绘制图片模糊问题
2022/05/11 Javascript