在Svelte中如何获取DOM元素并在按钮触发函数中使用？

你的代码思路是对的，bind:this并非仅在onMount中生效——当{#if}条件满足、div被渲染到DOM时，input变量会自动被赋值为对应的DOM元素；当条件不满足、div被销毁时，input会被设为undefined。

你只需要在foo函数中先判断input是否存在，避免元素未渲染时调用报错：

<script>
    let input;
    let edit = false; // 示例状态，可根据你的逻辑调整

    const foo = () => {
        // 先检查元素是否存在
        if (!input) {
            console.log('目标div尚未渲染');
            return;
        }
        
        // 这里可以安全操作DOM元素
        console.log('获取到的DOM元素:', input);
        // 示例操作：input.style.color = 'red';
    }
</script>

<button on:click={foo}>Foo</button>
{#if edit}
    <div bind:this={input}>动态渲染的div</div>
{/if}

补充说明 #

• 如果你的业务逻辑能保证点击按钮时edit一定为true（即div肯定存在），可以省略存在性检查，但保留检查能让代码更健壮。
• bind:this的绑定时机是元素挂载/销毁时，和onMount无关——onMount只是组件首次挂载的钩子，而条件渲染的元素会在条件变化时动态绑定/解绑。

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