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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
Django stark组件使用及原理详解
2019/08/22 Python
详解Django CAS 解决方案
2019/10/30 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python 解析xml文件的示例
2020/09/29 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
委托培训协议书
2014/11/17 职场文书
工商局个人工作总结
2015/03/03 职场文书
工作服管理制度范本
2015/08/06 职场文书