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 のパーセンテージ値を使用しないのはなぜですか? アスペクト比のせい？

縦横比が固定されたコンテナーを用意し、クライアント ウィンドウのサイズに基づいて 1 つのコンテナーのサイズを変更することを検討できます。通常の 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 に答える