javascript - %でブラウザウィンドウの幅に基づいてdivの高さをピクセルで設定します(jQueryまたはJS?)

Question

Web ページの周りに黒い境界線を設定しようとしています。左右は「width:5%;」にするだけ。CSSで問題ありません。しかし、JS/jQuery でピクセル数を計算し、それを上下の div の高さにします。

これは可能ですか？

ありがとう。

Answer 1

これはあなたのために働くはずです

var val = $(".leftAndRight").width();
$(".topAndBottom").height(val);

または1行で：

$(".topAndBottom").height($(".leftAndRight").width());

Answer 2

境界線の幅の値をプログラムで決定し、それを 4 つの境界線すべてに割り当て、サイズを変更するたびに更新することもできます。

var width,
    drawBorder = function () {
        var body = $('body'),
            width = body.width() * 0.05;
        body.css('border-width', width + 'px');
    };

drawBorder();

$(window).resize(function () {
    drawBorder();
});

デモ

スタイルシートで左右の幅を設定し、JS を使用して上下に同じ境界線の幅を指定すると、サイズ変更関数を使用しない限り、サイズを変更するたびに左右の境界線が変わりますが、上下の境界線は変わります。固定されたままになります。

Answer 3

.width() を使用して境界線なしの幅を見つけ、.outerWidth を使用して境界線を含む幅を見つけることができます。.outerWidth は、それを差し引く必要があるかもしれないパディングで幅も与えると思います。