javascript获取隐藏dom的宽高

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 18:04 点击:

 

一个隐藏的DOM是获取不到宽高的,如果想要获取,采用下面的方法:

首先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;&q

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • Gb2312转utf-8编码的方法(vbs+js)
      • 如何使用Ajax技术开发Web应用程序(1)
      • js跳转路径问题
      • JavaScript模仿桌面窗口
      • 用js检测两个线段是否相交
      • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
      • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
      • 我是如何去了解jquery的(六),案例之幻灯片轮换
      • Jquery封装幻灯片效果
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1