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

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

Javascript onresize事件未触发

1 个答案: