Svelte中TypeScript函数修改样式时DOM查询为空的解决方法

首先，你当前问题的根源是：组件初始化时abc()会立即执行，此时对应的DOM元素还未渲染完成，所以document.querySelector返回null。而且这种直接操作DOM的方式不符合Svelte的响应式设计思路，推荐用以下更简洁的方案：

方案1：用响应式变量绑定样式（最推荐） #

Svelte支持直接在模板中绑定样式，通过响应式变量的变化自动更新DOM，完全不需要手动操作DOM：

<script lang="ts">
  // 定义响应式变量，假设初始值为0
  let RecipientNumberOffScreen = 0;

  // 示例：模拟更新数值的逻辑
  const updateCount = () => {
    RecipientNumberOffScreen = Math.floor(Math.random() * 5);
  };
</script>

<button on:click={updateCount}>更新数量</button>

<div class="recipients">
  <!-- 直接通过响应式变量控制visibility样式 -->
  <div 
    class="recipients__OffScreen"
    style:visibility={RecipientNumberOffScreen === 0 ? 'hidden' : 'visible'}
  >
    {RecipientNumberOffScreen}
  </div>
</div>

如果元素隐藏时不需要渲染，用条件渲染会更高效：

<div class="recipients">
  {#if RecipientNumberOffScreen !== 0}
    <div class="recipients__OffScreen">
      {RecipientNumberOffScreen}
    </div>
  {/if}
</div>

方案2：绑定DOM元素引用（特殊场景下使用） #

如果确实需要手动操作DOM（不推荐，除非有特殊需求），可以用Svelte的bind:this获取元素引用，确保元素渲染后再操作：

<script lang="ts">
  import { onMount } from 'svelte';

  let RecipientNumberOffScreen = 0;
  let offScreenDiv: HTMLElement | null = null;

  // 组件挂载后（DOM已渲染）执行初始化操作
  onMount(() => {
    updateVisibility();
  });

  // 响应式语句：当RecipientNumberOffScreen变化时自动执行
  $: updateVisibility();

  function updateVisibility() {
    if (offScreenDiv) {
      offScreenDiv.style.visibility = RecipientNumberOffScreen === 0 ? 'hidden' : 'visible';
    }
  }

  const updateCount = () => {
    RecipientNumberOffScreen = Math.floor(Math.random() * 5);
  };
</script>

<button on:click={updateCount}>更新数量</button>

<div class="recipients">
  <div 
    class="recipients__OffScreen"
    bind:this={offScreenDiv}
  >
    {RecipientNumberOffScreen}
  </div>
</div>

原方法报错的原因 #

你的abc()函数在组件初始化阶段就被调用，此时<div class="recipients__OffScreen">还未被渲染到DOM中，所以document.querySelector找不到元素返回null，触发类型错误。Svelte的响应式系统正是为了避免这类原生DOM操作的痛点，优先采用方案1的写法更符合框架设计逻辑。

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