根據瀏覽器窗口的寬度（以jQuery或JS為單位）設置div的高度（以像素為單位）

Question

我正在嘗試在網頁周圍設置黑色邊框。 對於左側和右側，僅制作“寬度：5％；” 在CSS中就可以了。 但是然后我想讓JS / jQuery計算出多少個像素，並使其成為top和bottom div的高度。

這可能嗎？

謝謝。

Answer 1

這應該為你工作

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

或一行：

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

Answer 2

您可以通過編程確定邊框寬度的值，將其分配給所有四個邊框，並在每次調整大小時刷新它：

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

drawBorder();

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

演示

如果您在樣式表中設置左右寬度，然后使用JS為頂部和底部賦予相同的邊框寬度，除非您使用了resize功能，否則每次調整大小時，左右邊框都會改變，但是上下邊框將保持不變。

Answer 3

您可以使用.width（）查找不帶邊框的寬度，並使用.outerWidth查找包含邊框的寬度。 我認為.outerWidth還為您提供了可能需要減去的填充寬度。