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性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
为你总结一些php系统类函数
2015/10/21 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
React优化子组件render的使用
2019/05/12 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
python三元运算符实现方法
2013/12/17 Python
python复制文件的方法实例详解
2015/05/22 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
初中化学教学反思
2014/01/23 职场文书
领导班子对照检查材料
2014/09/22 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
JavaScript实现班级抽签小程序
2021/05/19 Javascript
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android