> 웹 프론트엔드 > JS 튜토리얼 > Javascript는 숨겨진 DOM의 너비와 높이를 얻습니다. 특정implementation_javascript 기술.

Javascript는 숨겨진 DOM의 너비와 높이를 얻습니다. 특정implementation_javascript 기술.

WBOY
풀어 주다: 2016-05-16 17:28:47
원래의
1277명이 탐색했습니다.

먼저 DOM을 복제하고 position:absolute를 설정한 다음 top을 상대적으로 큰 음수 값으로 설정한 다음 표시합니다. 마지막으로 DOM의 너비와 높이를 얻은 후 제거합니다.
구체적인 코드는 다음과 같습니다.
Js 코드

코드 복사 코드는 다음과 같습니다.

function getCss(elem, css){
if (window.getComputeStyle) {
return window.getComputeStyle(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 = {};
'너비 높이'.replace(/[^ ] /g, function(i){
var a = i.toLowerCase() ;
elem['offset' i] || elem['client' i]
return
}; 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 = "위치: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.getCompulatedStyle) {
return window.getComputeStyle(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 = {};
'너비 높이' .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 = "위치: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))


다른 더 나은 방법을 제안해 주시면 감사하겠습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿