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

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