자바 스크립트에서 너비 높이 및 위치 값 저장 jquery가 아닌

Question

어떻게 변수에 JQuery가 아닌 자바 스크립트 내에서 DIV 상자의 높이, 너비 및 위치 값을 저장할 수 있습니까?

더 구체적으로 : I 1600 폭의 화면 해상도 내 페이지를 설계하고

. 그래서 모든 div 태그가 원래 설계된 페이지 폭으로 클라이언트가 페이지에 액세스하는 현재 화면 크기의 비율에 비례하여 크기가 조정되는 스크립트를 작성하고 있습니다.

다른 말로하면 모든 div 태그의 높이 값과 위치 값을 모두 동적으로 가져온 다음이 비율을 곱하여 모든 비율의 크기와 위치를 다시 조정해야합니다.

하지만 지금까지이 값을 올바르게 저장할 수없는 것 같습니다.

이 내가 지금까지 쓴 것입니다 :

<script type=text/javascript> 
availW = window.screen.availWidth; 
availH = window.screen.availHeight; 

perNum = availW/1600; 

allDivs = document.getElementsByTagName("div"); 

allDivsLength = allDivs.length; 

for (var i=0; i<allDivsLength; i++) { 
    allDivsTop = []; 
    allDivsBottom = []; 
    allDivsLeft = []; 
    allDivsRight = []; 
    allDivsWidth = []; 
    allDivsHeight = []; 
    changeAllDivs(i); 
} 

function changeAllDivs(k) { 
    var i=k; 
    allDivsTop[i] = allDivs[i].currentStyle.getProperyValue("top"); 
    allDivsBottom[i] = allDivs[i].clientBottom; 
    allDivsLeft[i] = allDivs[i].clientLeft; 
    allDivsRight[i] = allDivs[i].clientRight; 
    allDivsWidth[i] = allDivs[i].clientWidth; 
    allDivsHeight[i] = allDivs[i].clientHeight; 
    allDivs[i].style.width = perNum*allDivsWidth[i]+"px"; 
    allDivs[i].style.height = perNum*allDivsHeight[i]+"px"; 
    allDivs[i].style.top = perNum*allDivsTop[i]+"px"; 
    allDivs[i].style.bottom = perNum*allDivsBottom[i]+"px"; 
    allDivs[i].style.left = perNum*allDivsLeft[i]+"px"; 
    allDivs[i].style.right = perNum*allDivsRight[i]+"px"; 
} 
<script/> 

Answer 1

왜 CSS의 백분율 값을 사용하지에 몸 Width 및 Height를 얻을? 가로 세로 비율 때문에?

고정 된 종횡비의 컨테이너가 있고 클라이언트 창의 크기에 따라 하나의 컨테이너 크기를 조정하면됩니다. 컨테이너 내의 모든 내용은 정상적인 CSS 백분율 값을 사용하여 배치 할 수 있습니다 ... 나중에 두통을 줄여야합니다.

지금 나는

availW = window.screen.availWidth; 
availH = window.screen.availHeight; 

perNum = availW/1600; 

allDivs = document.getElementsByTagName("div"); 

scaleProperties = ['clientTop', 'clientBottom'] //and so on 

for (var i=0; var l = allDivs.length; i < l; i++) { 
    var currDiv = allDivs[i]; 

    for(var p in scaleProperties) 
     currDiv[p] = (currDiv[p] * perNum) + "px"; 
} 

Answer 2

사용이 대부분의 브라우저

var availW ; 
var availH ; 
if(typeof(window.innerWidth == 'number')){ 
    availW = window.innerWidth; 
    availH = window.innerHeight; 
} 
else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){ 
    availW = document.documentElement.clientWidth; 
    availH = document.documentElement.clientHeight; 
} 
else if(document.body && (document.body.clientWidth || document.body.clientHeight)){ 
    availW = document.body.clientWidth; 
    availH = document.body.clientHeight; 
}