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 相关文章推荐
JS取文本框中最小值的简单实例
Nov 29 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
实战node静态文件服务器的示例代码
Mar 08 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
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
Python正则表达式知识汇总
2017/09/22 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python中entry用法讲解
2020/12/04 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
自我鉴定书范文
2013/10/02 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
民主评议党员总结
2014/10/20 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python