Javascript 基于屏幕大小的边框宽度

Javascript 基于屏幕大小的边框宽度,javascript,jquery,Javascript,Jquery,我正在创建一个网站上的对角线顶部和底部部分 我想知道是否有一个简单的jquery解决方案可以根据屏幕大小设置边框宽度的样式?我不能使用带有overflow:hidden的长尺寸,因为对角线的角度不正确 使角度一致的唯一方法是让jquery根据屏幕大小设置边框宽度 .odd-section-top { border-width: 0px 0 60px 2880px; border-style: solid solid solid dashed; border-color: transparent

我正在创建一个网站上的对角线顶部和底部部分

我想知道是否有一个简单的jquery解决方案可以根据屏幕大小设置边框宽度的样式?我不能使用带有overflow:hidden的长尺寸,因为对角线的角度不正确

使角度一致的唯一方法是让jquery根据屏幕大小设置边框宽度

.odd-section-top {
border-width: 0px 0 60px 2880px;
border-style: solid solid solid dashed;
border-color: transparent transparent #23264c transparent;
}

.odd-section-middle {
min-height: 600px;
padding: 50px 0;
background: #23264c;
}

.odd-section-bottom {
border-width: 0 2880px 60px 0;
border-style: solid dashed solid solid;
border-color: transparent #23264c transparent transparent;
}
然后Jquery将生成一个样式,该样式将

.odd-section-top {
border-left-width:
}

.odd-section-bottom {
border-right-width:
}
并根据屏幕大小填充数字

.odd-section-top {
border-width: 0px 0 60px 2880px;
border-style: solid solid solid dashed;
border-color: transparent transparent #23264c transparent;
}

.odd-section-middle {
min-height: 600px;
padding: 50px 0;
background: #23264c;
}

.odd-section-bottom {
border-width: 0 2880px 60px 0;
border-style: solid dashed solid solid;
border-color: transparent #23264c transparent transparent;
}

谢谢大家!

您可以在Javascript中执行所有操作:

var borderWidth = $elem.css("border-left-width");
$(".odd-section-top").css("border-width", borderWidth);

您可以根据需要调整它。

尝试过这个,但我知道我弄错了一些语法。我对javascript和jquery还是比较新的。这条路对吗

<script>
$(document).ready(function () {
responsiveradio.initBorders = function () {

    var $window = $(window),
        $topOddBox = $('.odd-section-top'),
        $botOddBox = $('.odd-section-bottom'),
        $topEvenBox = $('.even-section-top'),
        $botEvenBox = $('.even-section-bottom'),
        ;

    function resetBorders() {
        var w = $window.width(),
        $topOddBox.css('border-left-width', w);
        $botOddBox.css('border-right-width', w);
        $topEvenBox.css('border-left-width', w);
        $botEvenBox.css('border-right-width', w);
    }  
});
</script>

这就是我试过的。我还是javascript和jquery的新手,所以根据错误控制台,我的synax关闭可能是错误的。