欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

javascript获取隐藏dom的宽高 具体实现

时间:2020-12-18 01:14:19|栏目:JavaScript代码|点击:
首先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));

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

上一篇:一个基于react的图片裁剪组件示例

栏    目:JavaScript代码

下一篇:js中获取键盘事件的简单实现方法

本文标题:javascript获取隐藏dom的宽高 具体实现

本文地址:http://www.codeinn.net/misctech/33933.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有