在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

回答

相關問題