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 22 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
如何在JS文件中获取Vue组件
Sep 16 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里得到前天和昨天的日期的代码
2007/08/16 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
Angular的$http与$location
2016/12/26 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
为python设置socket代理的方法
2015/01/14 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python常用库推荐
2016/12/04 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
医学生个人求职信范文
2013/09/24 职场文书
房地产营销策划方案
2014/02/08 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
护士求职信范文
2014/05/24 职场文书
药店促销活动策划方案
2014/08/24 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
大学生自荐信范文
2015/03/05 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python