在Svelte中响应式修改CSS变量及动态Grid列数问题解决

我需要用CSS Grid展示结构如下的动态数据对象：

数据结构 #

let data = {
    rows: [
      {
        id: "id",
        col1: "value1",
        col2: "value2",
      },
      {
        id: "id",
        col1: "value1",
        col2: "value2",
      },
    ],
  };

预期展示效果 #

呈现为表格状的网格布局，每行包含对应数据项的各列单元格，单元格带边框和内边距，网格间有间距。

当前实现代码 #

我采用Svelte组件实现，核心代码如下：

<script>
  export let data = {
    rows: [
      {
        id: "id",
        col1: "value1",
        col2: "value2",
      },
      {
        id: "id",
        col1: "value1",
        col2: "value2",
      },
    ],
  };

  function changeCols() {
    let r = document.querySelector(":root");
    r.style.setProperty("--columns", "4");
  }
</script>

<!-- CSS Grid 展示数据 -->
<div class="grid">
  {#each data.rows as row}
    {#each Object.keys(row) as key}
      <div class="cell">{row[key]}</div>
    {/each}
  {/each}
</div>

<button on:click={changeCols}>切换为4列</button>

<style>
  :root {
    --columns: 3;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-gap: 1rem;
    padding: 1rem;
  }

  .cell {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>

遇到的问题 #

点击按钮触发changeCols()函数时，报错提示style属性不存在，想知道报错原因，同时希望了解在JavaScript中便捷修改多个CSS属性的方案。

报错原因 #

1. DOM访问时机问题：如果changeCols()在组件挂载前被调用（比如SSR环境下），document.querySelector(":root")会返回null，此时访问r.style自然会报错。
2. 不符合Svelte设计理念：直接操作全局DOM元素的方式绕过了Svelte的响应式系统，容易导致组件状态与DOM状态不一致，引发意外问题。

解决方案 #

1. 修复当前DOM操作的报错 #

确保在组件挂载后再访问DOM，使用Svelte的onMount钩子：

<script>
  import { onMount } from 'svelte';
  export let data = { /* 数据结构同上 */ };

  let rootElement;

  onMount(() => {
    // 组件挂载后获取根元素
    rootElement = document.querySelector(":root");
  });

  function changeCols() {
    // 先判断元素是否存在，避免报错
    if (rootElement) {
      rootElement.style.setProperty("--columns", "4");
    }
  }
</script>

2. 更符合Svelte的响应式实现（推荐） #

利用Svelte的响应式变量直接绑定CSS变量，无需手动操作DOM：

<script>
  export let data = { /* 数据结构同上 */ };
  // 用响应式变量控制列数
  let columnCount = 3;

  function changeCols() {
    columnCount = 4;
  }
</script>

<div class="grid" style="--columns: {columnCount}">
  {#each data.rows as row}
    {#each Object.keys(row) as key}
      <div class="cell">{row[key]}</div>
    {/each}
  {/each}
</div>

<button on:click={changeCols}>切换为4列</button>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-gap: 1rem;
    padding: 1rem;
  }

  .cell {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
</style>

3. 便捷修改多个CSS属性的通用方案 #

方案一：多响应式变量绑定CSS变量

定义多个响应式变量对应不同的CSS变量，修改变量即可同步更新样式：

<script>
  let cols = 3;
  let gap = "1rem";
  let padding = "1rem";

  function updateGridStyle() {
    cols = 4;
    gap = "1.5rem";
    padding = "1.5rem";
  }
</script>

<div class="grid" style="--cols: {cols}; --gap: {gap}; --padding: {padding}">
  <!-- 内容 -->
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-gap: var(--gap);
    padding: var(--padding);
  }
</style>

方案二：动态切换CSS类

提前定义好不同状态的CSS类，通过响应式变量控制类的切换：

<script>
  let gridClass = "grid-default";

  function changeTo4Cols() {
    gridClass = "grid-4cols";
  }
</script>

<div class={gridClass}>
  <!-- 内容 -->
</div>

<style>
  .grid-default {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    padding: 1rem;
  }

  .grid-4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1.5rem;
    padding: 1.5rem;
  }
</style>

方案三：对象绑定样式

将需要修改的CSS属性整理成对象，通过Svelte的样式绑定直接应用：

<script>
  let gridStyles = {
    "--columns": 3,
    "grid-gap": "1rem",
    padding: "1rem"
  };

  function updateGrid() {
    gridStyles["--columns"] = 4;
    gridStyles["grid-gap"] = "1.5rem";
    gridStyles.padding = "1.5rem";
  }
</script>

<div class="grid" style={gridStyles}>
  <!-- 内容 -->
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }
</style>

内容的提问来源于stack exchange，提问作者Felkru