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 tools系列 expose 学习
Sep 06 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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
Phpbean路由转发的php代码
2008/01/10 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
Web开发必知Javascript技巧大全
2016/02/23 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
python和C语言混合编程实例
2014/06/04 Python
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python贪心算法实例小结
2018/04/22 Python
python实现月食效果实例代码
2019/06/18 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python表达式的优先级详解
2020/02/18 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
商场消防管理制度
2014/01/12 职场文书
面试自我评价范文
2014/09/17 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
考研复习计划
2015/01/19 职场文书
学校重阳节活动总结
2015/03/24 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
公司车队管理制度
2015/08/04 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
外出培训学习心得体会
2016/01/18 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js