在javascript中存储宽度高度和位置值不与jquery

如何在一个变量中存储JavaScript（不包括JQuery！）中的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/>

来源

2012-11-20 cursez

你为什么不写百分比所有的CSS值摆在首位？ –

...有没有想过它..谢谢:) – cursez

但如果我不想做一个线性转换像一个比例的乘法是..但它是一个好主意，用css做开始，大多数我都想在JavaScript和dom级别的方法上练习。 – cursez

为什么不使用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-20 12:50:53 user1568528

其实这是我第一次尝试在我的第一个网页，一般我可以说我没有'我认为很多东西..我不知道什么是做自动页面调整大小（我不知道是否有这样一个术语）的最可取和安全的方式，我只是在JavaScript练习一对一，两个月与一些教程..非常感谢代码更正，我会认为这种方法:) – cursez

如果你正在学习JS，你可能会得到良好的习惯进入你的系统，并阅读执行上下文，特别是你可能想要以隔离这样的功能，以免污染全球范围:) – user1568528

是的，我知道保持大量全局变量并不好，并且最好将所有内容都放在函数中。上面的代码是强制的t测试脚本内唯一的东西..顺便说一下，有任何关于如何存储CSS值与JavaScript的好文档..因为我有访问类似边界大小..边界颜色的风格的问题..我不知道哪个使用节点.. – cursez

使用此功能让你的身体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-20 12:41:58 George

谢谢我不知道如何做跨浏览器的兼容性.. – cursez

在javascript中存储宽度高度和位置值不与jquery

回答

相关问题