0

如何将 DIV 框的高度、宽度和位置值存储在 javascript（不使用 JQuery！）中的变量中？

进一步来说：

我正在为 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/>
4

2 回答 2

1

为什么不使用 CSS 百分比值？因为长宽比？

您可以考虑拥有一个具有固定纵横比的容器，并根据客户端窗口的大小调整一个容器的大小。容器内的任何东西都可以使用正常的 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";
}
于 2012-11-20T12:50:53.560 回答
0

在大多数浏览器中 Width使用它来获取您的身体Height

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;
}
于 2012-11-20T12:41:58.720 回答