技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> javascript获取隐藏dom的宽高

javascript获取隐藏dom的宽高

浏览:1912次  出处信息

一个隐藏的DOM是获取不到宽高的,如果想要获取,采用下面的方法:
首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove。

具体代码如下:

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));

还有其他更好的方法欢迎提出来。

建议继续学习:

  1. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类    (阅读:5775)
  2. 仅100行的JavaScript DOM操作类库    (阅读:3386)
  3. phpQuery:像jQuery一样处理DOM    (阅读:3322)
  4. 对大量子节点DOM操作的最佳实践方式    (阅读:3136)
  5. 获取Dom元素的X/Y坐标    (阅读:2853)
  6. React入门:关于虚拟DOM(Virtual DOM)    (阅读:2567)
  7. DOM元素上jQuery事件几点学习    (阅读:2421)
  8. JS操作iframe里的dom    (阅读:2343)
  9. DOM Storage全解析    (阅读:2268)
  10. 页面DOM加载顺序和用户视觉浏览顺序的一致性    (阅读:2237)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1