Javascript onresize事件未触发

我试图在调整浏览器大小时调整背景图像的边框宽度。我调用了onload和onresize函数。不幸的是，只调用了onload。因此，当我调整浏览器大小时，我必须刷新页面以查看更新的边框宽度。控制台中没有错误消息，其他一切都可以完美地工作——就好像我还没有编写一个调整大小的侦听器一样

w = window.innerWidth;
h = window.innerHeight;
hypotenuse = Math.sqrt(w * w + h * h);
borderWidth = window.hypotenuse/74;

function adjustBorder(width) {
    document.getElementById('tileBlock').style.borderWidth = width + 'px';
}

window.onload=function(){
adjustBorder(borderWidth);
}

window.onresize = function() {
    adjustBorder(borderWidth);
}



 <div class="wrapper" id="tileBlock"></div>



    #tileBlock {
    position: fixed;
    background-color: #0b0b0b;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(photo.jpg);
    border: 20px solid #fff;
    background-size: cover;  
    }

w=window.innerWidth；
h=窗内高度；
斜边=数学sqrt（w*w+h*h）；
边框宽度=窗。斜边/74；
功能调整边框（宽度）{
document.getElementById（'tileBlock'）。style.borderWidth=width+'px'；
}
window.onload=function（）{
调整边框（边框宽度）；
}
window.onresize=函数（）{
调整边框（边框宽度）；
}
#瓷砖砖{
位置：固定；
背景色：#0b0b0b；
背景位置：中心；
背景重复：无重复；
背景图片：url（photo.jpg）；
边框：20px实心#fff；
背景尺寸：封面；
}

问题在于，您仅在第一次加载javascript时定义了

边框宽度。当窗口更改时，它需要更改。大致如下：

function adjustBorder(width) {
    document.getElementById('tileBlock').style.borderWidth = width + 'px';
}

window.onload=function(){
    var borderWidth = getBorderWidth();
    adjustBorder(borderWidth);
}

window.onresize = function() {
    var borderWidth = getBorderWidth();
    adjustBorder(borderWidth);
}

function getBorderWidth(){
    w = window.innerWidth;
    h = window.innerHeight;
    hypotenuse = Math.sqrt(w * w + h * h);
    borderWidth = window.hypotenuse/74;
}

未经测试，试试看是否有帮助。
哦，是的！您的代码几乎完美-非常感谢！我只需要用“getBorderWidth（）；”替换您的“var borderWidth=getBorderWidth（）；”