Svelte中动态生成DOM元素时如何实现类的实时切换？

方法1：优先使用Svelte声明式模板（推荐） #

Svelte的核心优势是声明式渲染，能自动处理响应式更新。哪怕是动态生成的元素，也应该尽量通过模板语法实现，而非手动操作DOM。

你可以维护一个动态元素的数据源数组，用{#each}循环渲染，类名直接在模板里用三元表达式，这样theme变化时Svelte会自动更新所有元素的类：

<script lang="ts">
  let theme: 'dark' | 'light' = 'light';
  // 动态元素的数据源，可根据业务逻辑动态增删
  let dynamicItems = [{ id: 1, content: 'Hello' }, { id: 2, content: 'World' }];
</script>

<div id="parentDiv">
  {#each dynamicItems as item (item.id)}
    <div class="{theme === 'dark' ? 'bg-black' : 'bg-white'}">
      {item.content}
    </div>
  {/each}
</div>

方法2：手动操作DOM时，利用Svelte反应式监听变量变化 #

如果因为特殊需求（比如集成第三方DOM库）必须手动创建元素，你可以通过Svelte的反应式语句（$:前缀）监听theme的变化，实时更新元素的类名：

<script lang="ts">
  let theme: 'dark' | 'light' = 'light';
  let childDiv: HTMLDivElement | null = null;
  let parentDiv: HTMLDivElement | null = null;

  // 当父元素挂载后，创建动态元素
  $: if (parentDiv && !childDiv) {
    childDiv = document.createElement('div');
    childDiv.textContent = 'Hello';
    // 初始化类名
    updateThemeClass();
    parentDiv.appendChild(childDiv);
  }

  // 监听theme变化，实时更新类名
  $: if (childDiv) {
    updateThemeClass();
  }

  function updateThemeClass() {
    if (!childDiv) return;
    // 用toggle方法更简洁：第二个参数为true时添加类，false时移除
    childDiv.classList.toggle('bg-black', theme === 'dark');
    childDiv.classList.toggle('bg-white', theme !== 'dark');
  }
</script>

<!-- 用bind:this获取父元素，替代getElementById -->
<div bind:this={parentDiv}></div>

关键说明 #

• 原生DOM的classList.add()仅执行一次，无法自动响应变量变化，因此需要手动监听theme的更新。
• Svelte的$:反应式语句会在依赖变量（如theme、parentDiv）变化时自动执行，确保类名实时同步。
• 使用classList.toggle()可以避免手动移除旧类，代码更简洁可靠。

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