監聽窗口大小改變,同時根據窗口大小修改某個元素的大小
阿新 • • 發佈:2018-11-15
加載完成 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(); };
監聽窗口大小改變,同時根據窗口大小修改某個元素的大小