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 相关文章推荐
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
VUE长按事件需求详解
Oct 18 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
webpack的移动端适配方案小结
Jul 25 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
phpfans留言版用到的install.php
2007/01/04 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP 全角转半角实现代码
2010/05/16 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue组件系列之TagsInput详解
2020/05/14 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python对象及面向对象技术详解
2016/07/19 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
临床医学专业个人的自我评价
2013/09/27 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
未婚证明书模板
2014/10/08 职场文书
中班上学期个人总结
2015/02/12 职场文书
2015年度企业工作总结
2015/05/21 职场文书