Home > Web Front-end > JS Tutorial > Javascript obtains the width and height of the hidden dom. Specific implementation_javascript skills

Javascript obtains the width and height of the hidden dom. Specific implementation_javascript skills

WBOY
Release: 2016-05-16 17:28:47
Original
1276 people have browsed it

First clone a DOM, set position:absolute, then set top to a relatively large negative value, and then display it. Finally, after obtaining the width and height of the DOM, remove it.
The specific code is as follows:
Js code

Copy code The code is as follows:

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

You are welcome to suggest other better methods.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template