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基础知识之方法汇总结
Jan 24 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
简单了解JavaScript异步
May 23 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
JS实现简易贪吃蛇游戏
Aug 24 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 数字左侧自动补0
2008/03/31 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP函数积累总结
2019/03/19 PHP
document.compatMode介绍
2009/05/21 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
公司董事长职责
2013/12/12 职场文书
制作部班长职位说明书
2014/02/26 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
快递员岗位职责
2014/09/12 职场文书
小学生成绩单评语
2014/12/31 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
通知的格式范文
2015/04/27 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫