主页 / coding / 问题 / 79055344
Accepted
Lee Morgan
Asked: 2024-10-05 01:47:18 +0800 CST

如何访问 DOM 元素并在函数中使用

  • 772

考虑以下代码：

<script>
    let input;
    const foo = () => {
        let html = input.innerHTML;
        // Do something with HTML
    }
</script>

<button on:click={foo}>Foo</button>
{#if edit}
    <div bind:this={input}></div>
{/if}

我需要获取 div 的 DOM 元素。然后在按钮运行的函数中使用它。我该怎么做？bind:this仅在 中有效onMount，但我无法foo在 内定义onMount。

理解这一点innerHTML，或者具体的方法/属性并不重要。我只需要在按下按钮时调用的函数中使用它的 DOM 元素。

sveltekit

1 个回答

  1. Best Answer

    该元素根本就不存在。

    您必须等待下次更新时创建它。

    import { tick } from 'svelte';
async function foo() {
  edit = true; // change #if condition so next update creates element
  await tick();
  // [interact with bound element]
}

    重新编译

    • 2

相关问题