gpt4 book ai didi

javascript - 如何在阴影根中获取元素?

转载 作者:行者123 更新时间:2023-12-04 10:03:40 27 4
gpt4 key购买 nike

我的 html 内容位于 shadow root 中,这些内容都是通过 microblink SDK 动态生成的。

我需要将EventListener 添加到#fileBtn所以每当它被点击时,我都需要做一些事情。但由于它是影子根,我无法访问 DOM 属性。我也为此使用reactjs。

<microblink-ui-web tabs="true" autoscroll="true" style="height: 319.562px;">
#shadow-root (open)
<div class="container root" max-width="500px 600px 630px">
<div class="container main">
<div class="container intro dropzone active">
<div class="flex-vertical">
<p class="intro-label">
<slot name="labels.chooseInputMethod">Choose input method</slot>
</p>
<div class="flex-horizontal">
<input
type="file"
accept="image/png,image/gif,image/bmp,image/jpeg,image/x-png,image/vnd.wap.wbmp"
id="file"
/>
<button type="button" class="intro-button" id="fileBtn">
</button>
<button type="button" class="intro-button" id="cameraLocalBtn">
</button>
</div>
</div>
</div>
</div>
</div
></microblink-ui-web>

提前致谢!!!

最佳答案

使用shadowRoot属性来访问 Shadow DOM 内容。

let mb = document.querySelector( 'microblink-ui-web' )
mb.shadowRoot.querySelector( '#fileBtn' ).addEventListener( 'click', clicked )

function clicked( ev ) {
console.log( ev.target.id + 'clicked' )
}

关于javascript - 如何在阴影根中获取元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61695933/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com