javascript获取隐藏dom的宽高 具体实现
首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove。
具体代码如下:
Js代码
还有其他更好的方法欢迎提出来。
具体代码如下:
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));
还有其他更好的方法欢迎提出来。
相关推荐
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Vue和React是数据驱动视图,如何有效控制DOM操作?能不能把计算,更多的转移为js计算?因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children
Lophole 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14