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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 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中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
jQuery.each使用详解
2015/07/07 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
python字符类型的一些方法小结
2016/05/16 Python
python中关于for循环的碎碎念
2017/06/30 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
大学迎新生标语
2014/10/06 职场文书
合作意向书范本
2019/04/17 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
用python自动生成日历
2021/04/24 Python