在javascript中存储宽度高度和位置值不使用jquery答案

【问题标题】：Storing width height and position values in javascript Not with jquery在javascript中存储宽度高度和位置值不使用jquery
【发布时间】：2012-11-20 20:50:53
【问题描述】：

如何将 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/>

【问题讨论】：

一开始为什么不把所有的 CSS 值都写成百分比呢？
...还没有考虑过...谢谢:)
但是如果我不想做一个线性变换，比如乘以一个比率是..但是一开始用css做是个好主意，主要是我想练习javascript 和 dom 级别的方法。
不使用jQuery的原因也纯粹是学术性的？ :-)
我刚接触 javascript 才一个半月，我想先了解 javascript 核心的功能，然后转向 jQuery

标签： javascript

【解决方案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";
}

【讨论】：

实际上这是我在第一个网页上的第一次尝试，通常我可以说我没有考虑很多事情..我不知道什么是最可取和最安全的自动操作方式页面大小调整（我不知道是否有这样的术语），我只是在 javascript 中练习一两个月的一些教程.. 非常感谢代码更正我会考虑这种方法:)
如果你正在学习 JS，你最好在你的系统中获得良好的实践并阅读执行上下文，特别是你可能想要隔离这样的函数，以免污染全局范围:)
是的，我知道保留很多全局变量并不好，最好将所有内容都保留在函数中.. 上面的代码只是测试脚本中的唯一内容.. 顺便说一下有没有关于如何使用 javascript 存储 css 值的好文档 .. 因为我在访问边框大小等样式时遇到问题 .. 边框颜色 .. 我不知道要使用哪些节点 ..
我认为没有任何简单的方法。这就是人们使用 jQuery 之类的跨浏览器库的原因——他们已经完成了使所有内容都能在不同浏览器之间很好地解析的艰苦工作。
你是对的..我应该开始寻找一些朝着这个方向的教程......我只是认为存储这样的简单值很容易..但是..我可以'不明白为什么他们让这么简单的东西变得如此困难......无论如何再次感谢

【解决方案2】：

在大多数浏览器中使用它来获取您的身体 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;
}

【讨论】：