JavaScript onresize 事件未触发

Question

我正在尝试在调整浏览器大小时调整背景图片的边框宽度。我正在调用该函数 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;  
    }

Answer 1

问题是您只在第一次加载 javascript 时定义您的 borderwidth。当窗口改变时需要改变它。类似的东西:

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;
}

未经测试，试试看是否有帮助。