如何在 JavaScript matchMedia 事件中更新 CSS 变量

如何解决如何在 JavaScript matchMedia 事件中更新 CSS 变量

我使用 JavaScript 和 css column-width 布局来计算浏览器窗口中每个新列的断点。对于每个新列，我还增加了页边距，我计算了第二个断点以使其适合。

我使用 root.classList.add(myCss) 和 root.classList.remove(myCss) 使一切都可以正常工作，但对于页边距，我更愿意更新单个 css 变量 --page-margins，而不是在可能的情况下添加和删除 css 边距类.

在以下示例中，当我加载页面并且两列适合浏览器窗口时，正确的 --page-margin 应为 16，但 Chrome 检查器显示为 24。看起来当页面加载时，matchMedia 事件会检查每个媒体查询，如果它不匹配，则将 css 变量 --page-margins 设置为 (cols - 1)，如果该事件先前匹配，我只需要它执行此操作。

页面加载后，如果我增加和减少浏览器宽度，一切正常。我可以实现这一目标的一种方法是使用某种条件“如果事件不匹配...”？

document.addEventListener('DOMContentLoaded',function() {
  grid();
});

// The grid system
function grid() {

  const root = document.documentElement;
  const columnWidth = 239;
  const columnGap = 1;
  const columnMin = columnWidth + columnGap;
  const scrollbar = 20;
  let margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'),10);


  // Page margins
  const marginone   =  8;
  const marginTwo   = 16;
  const marginThree = 24;
  const marginFour = 32;
  
  mediaQuery(2);
  mediaQuery(3);
  mediaQuery(4);
  
  // Media queries for columns
  function mediaQuery(cols) {

    let marginStyles = window.matchMedia('(min-width: ' + columns(cols)  + 'px)');
    marginStyles.addEventListener('change',addMargins);
    addMargins(marginStyles);

    function addMargins(e) {

      if (e.matches) {
        root.style.setProperty('--page-margins',setMargins(cols) + 'px');
        margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'),10);

      }
      else {
        root.style.setProperty('--page-margins',setMargins((cols - 1)) + 'px');
        margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'),10);

      }
    }

  }

  // Return the screen width (breakpoint) at num columns
  function columns(num) {
    setMargins(num);
    let breakpoint = (columnMin * num) - columnGap + (padding * 2) + scrollbar;
    return breakpoint;
  }

  // Set the margin for each column number
  function setMargins(num) {
    if (num == 4) {
      padding = marginFour;
    } else if (num == 3) {
      padding = marginThree;
    } else if (num == 2) {
      padding = marginTwo;
    } else {
      padding = marginone;
    }
    return padding;
  }

}

解决方法

我在发布后不久就想通了。我需要在事件的 else 语句中嵌套第二个条件，以检查 css 变量 --page-margins 的值。变量 margins 在脚本的其他地方被引用，所以我会在事件匹配和不匹配时更新它。

一切正常。

function addMargins(e) {
    if (e.matches) {
        root.style.setProperty('--page-margins',setMargins(cols) + 'px');
        margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'),10);

    }
    else {
        if (margins == setMargins(cols)) {
            root.style.setProperty('--page-margins',setMargins((cols - 1)) + 'px');
            margins = parseInt(window.getComputedStyle(root).getPropertyValue('--page-margins'),10);
        }
    }
}