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 Hack
Jul 24 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
node使用request请求的方法
Dec 20 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
详解JS深拷贝与浅拷贝
Aug 04 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
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
python实现基本进制转换的方法
2015/07/11 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python selenium 弹出框处理的实现
2019/02/26 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
为什么说python适合写爬虫
2020/06/11 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
物流仓储计划书
2014/01/10 职场文书
商场总经理岗位职责
2014/02/03 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015高考寄语集锦
2015/02/27 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
学习nginx基础知识
2021/09/04 Servers