1. 程式人生 > >監聽窗口大小改變,同時根據窗口大小修改某個元素的大小

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

加載完成 code pre scrip chang sea alert element 內部

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

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