監聽視窗大小改變，同時根據視窗大小修改某個元素的大小

zoeeying發表於2018-11-14

jQuery的方法：

<script>  
    $(window).resize(function(){  
        var width = $(this).width();  
        var height = $(this).height();  
        alert(‘width’+width+’-height’+height);  
    });  
</script>

 以上的方法，不能寫在頁面載入完成事件函式$(function(){})內部，而需要寫在外面。

頁面載入完成事件：

$(function(){});

$(document).ready(function(){});

window.onload = function(){};

我們專案中的程式碼：

// 監聽視窗大小變化
function changeHeight(){
    let h = document.documentElement.clientHeight;
    document.getElementById("searchResult").style.height = h - 9 - 74 + `px`;
    document.getElementById("goodsTableBody").style.height = h - 9 - 74 -160 + `px`;
}
window.onload = function(){
    changeHeight();
};
window.onresize = function(){
    changeHeight();
};

 

相關文章