Question

how can I store the height ,width and position values of a DIV box within javascript (not with JQuery!) in a variable?

more specifically:

I am designing my pages for a screen resolution of 1600 width.
So I am writing a script in which all the div tags will be re-sized proportionally to the ratio of the current screen size that the client is accessing the page by the width of the page that was originally designed.

In other words I want to get dynamically all the height width and position values of all div tags and then multiply them with this ratio so that all of them will be re-sized and re-positioned proportionally.

But so far i cannot seem to be able to store this values correctly.

this is what i have written so far:

<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

Why not use CSS percentage values? Because of aspect ratio?

You could consider having a container with a fixed aspect ratio, and just resizing the one container based on the size of the client window. Anything within the container could be placed using normal CSS percentage values… Should save you some headaches later on.

Now I’ve modified your code slightly, see if it works better

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";
}