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 相关文章推荐
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
详解js闭包
Sep 02 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
jQuery的框架介绍
May 11 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
15个值得收藏的JavaScript函数
Sep 15 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简单获取文件扩展名的方法
2015/03/24 PHP
PHP SOCKET编程详解
2015/05/22 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Python判断有效的数独算法示例
2019/02/23 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
tensorflow的计算图总结
2020/01/12 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
大学班级干部的自我评价分享
2014/02/10 职场文书
家长通知书家长评语
2014/04/17 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
保卫工作个人总结
2015/03/03 职场文书
2016春节家属慰问信
2015/03/25 职场文书
大专护理专业自荐信
2015/03/25 职场文书
联谊会开场白
2015/06/01 职场文书
个人催款函范文
2015/06/23 职场文书
导游词之湖北武当山
2019/09/23 职场文书