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实现仿银行密码输入框效果的代码
Dec 13 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
Angularjs单选框相关的示例代码
Aug 17 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
sort命令的作用和用法
2012/11/04 面试题
十一个高级MySql面试题
2014/10/06 面试题
领导干部作风建设自查报告
2014/10/23 职场文书
起诉状范本
2015/05/20 职场文书
python基础入门之字典和集合
2021/06/13 Python