Javascript onresize event not firing

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

問題是，你只定義你borderwidth首次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; 
} 

未經測試，試試看看是否有幫助。