根据浏览器窗口的宽度（以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还为您提供了可能需要减去的填充宽度。