使用javascript函式計算Innerwidth和innerheight-有解無憂

我的代碼只在 setInterval() 或 settimeout() 函式中作業。我不知道如何使用基本的 javascript 函式來做到這一點。我不想使用 setInterval 函式，時間為 0 毫秒，這就是為什么我需要在螢屏上顯示任何內容之前獲取這些值。幫幫我 - 如何在沒有這些功能的情況下使其作業。

JAVASCRIPT

   setInterval(function()
   
   {       
       if (window.matchMedia("(min-width: 215px)").matches) 
       {
           const mainwidth = window.innerWidth * 1.0;
           const mainheight = window.innerHeight * 1.0;
           document.getElementById("show-logo").style.setProperty('--set-mainwidth', mainwidth   "px");
           document.getElementById("show-logo").style.setProperty('--set-mainheight', mainheight   "px");
       }

   }, 0);

此代碼運行良好，但我不想使用 setInterval 或 setTimeout。所以我嘗試了下面的代碼但沒有作業。如何在不設定任何毫秒時間的情況下解決此問題并使其快速運行..？

JAVASCRIPT

   var loadcheck = initialload();  
   function initialload()  
   {       
       if (window.matchMedia("(min-width: 215px)").matches) 
       {
           const mainwidth = window.innerWidth * 1.0;
           const mainheight = window.innerHeight * 1.0;
           document.getElementById("show-logo").style.setProperty('--set-mainwidth', mainwidth   "px");
           document.getElementById("show-logo").style.setProperty('--set-mainheight', mainheight   "px");
       }
   }

uj5u.com熱心網友回復：

在此示例中，我定義了一個updateLogo()執行兩個 CSS 屬性/變數更新的函式。將呼叫在DOMContentLoadedondocument和 onresize函式上使用事件偵聽器。window

如果目的是在setInterval()調整視窗大小時更新屬性，則使用事件偵聽器會更好。

document.addEventListener('DOMContentLoaded', updateLogo);
window.addEventListener('resize', updateLogo);

function updateLogo() {
  if (window.matchMedia("(min-width: 215px)").matches) {
    const mainwidth = window.innerWidth * 1.0;
    const mainheight = window.innerHeight * 1.0;
    document.getElementById("show-logo").style.setProperty('--set-mainwidth', mainwidth   "px");
    document.getElementById("show-logo").style.setProperty('--set-mainheight', mainheight   "px");
  }
  console.log(document.getElementById("show-logo").outerHTML);
}

<div id="show-logo"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/494949.html

標籤：javascript 功能变量

上一篇：將python變數保存到csv

下一篇：PHP在沒有太多代碼的情況下根據另一個變數的值進行變數增量？