dom 相关问题

假设我有一个叫做“面板”的东西。它包含一个隐藏部分和一个显示它的按钮。很容易。然而我有点喜欢并决定使用自定义元素假设我有一个叫做“面板”的东西。它包含一个隐藏部分和一个显示它的按钮。够简单的。但是我有点喜欢，决定使用自定义元素 <custom-panel> 来标记每个面板的边界，<template> 表示内容，<slots> 表示配置（标题、详细信息等）。现在我对如何连接按钮有点困惑。该模板具有 CSS，如果设置了正确的类，它将显示/隐藏面板的详细信息。但我该如何设置呢？我只知道如何获取模板的内容（没有已解析的插槽）或自定义面板的内容（没有模板信息）。完整示例： customElements.define( 'custom-panel', class extends HTMLElement { constructor() { super(); const template = document.getElementById('custom-panel-template'); const templateContent = template.content; this.attachShadow({ mode: 'open' }).appendChild( templateContent.cloneNode(true) ); } } ); <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Custom Panels</title> </head> <body> <custom-panel> <span slot="openButtonText">Open Panel 1</span> <span slot="closeButtonText">Close Panel 1</span> <span slot="panelName">Panel 1</span> <div slot="">Panel 1 Details</div> </custom-panel> <custom-panel> <span slot="openButtonText">Open Panel 2</span> <span slot="closeButtonText">Close Panel 2</span> <span slot="panelName">Panel 2</span> <div slot="panelContent">Panel 2 Details</div> </custom-panel> <template id="custom-panel-template"> <style type="text/css"> #panel { display: none; } #panel.open { display: revert; } </style>  <button type="button"><slot name="openButtonText">Default Open Button Text</slot></button> <button type="button"><slot name="closeButtonText">Default Close Button Text</slot></button> <fieldset id="panel"> <legend><slot name="panelName">Default Panel Name</slot></legend> <slot name="panelContent">Default Panel Content</slot> </fieldset> </template> </body> </html> customElements.define( 'custom-panel', class extends HTMLElement { constructor() { super(); const template = document.getElementById('custom-panel-template'); const templateContent = template.content; this.attachShadow({ mode: 'open' }).appendChild( templateContent.cloneNode(true) ); // get a reference to the panel const panel = this.shadowRoot.querySelector("#panel"); // hookup the open this.shadowRoot.querySelector("button#open").addEventListener("click", () => { panel.className = "open"; }); // hookup the close this.shadowRoot.querySelector("button#close").addEventListener("click", () => { panel.className = ""; }); } } );

javascript html dom custom-element

回答 1 投票 0

使元素脱离正常流程的 CSS 属性是什么？

使元素脱离正常流程的 CSS 属性是什么？这些属性可以是 float、position:absolute 等。这个问题涉及正常流程的所有可能的改变。

html css dom position

回答 2 投票 0

如何获取<p>节点中第一个可见字符的偏移量

我在 epub 文件的节点中有大段文本，我使用外部库在移动屏幕 Web 视图上显示这些文本。图书馆允许我翻页来查看的部分内容我在 <p> 文件的 epub 节点中有大段文本，我使用外部库在移动屏幕 Web 视图上显示这些内容。该库允许我翻页以查看这些 <p> 节点的部分内容。我可以从 DOM 中获取当前可见的节点。但是我还需要获取该节点中当前可见的第一个字符的偏移量。例如：在上图中，可见文本是实际 <p> 元素的一小部分。我想获取第一个字符的字符偏移量（不是像素偏移量），在本例中为“v” 有办法做到吗？我对EPUB文件了解不多，也许有一些方法可以获取当前显示文本的偏移量。他们的方式我认为你可以做到这一点将是基本js并且需要整个文本和当前显示的文本。自从你写了我可以从 DOM 中获取当前可见的节点。我认为可以安全地假设您有权访问显示的文本。我想到的方法是使用 String.prototype.indexOf() 方法来查找该文本切片在整个文本中的位置。例如 // get the whole text const fullText = "This is a very long text. I can read it for hours and it doesnt stop there." // get the text of the current displayed node const nodeText = "read it for hours and it doesnt stop there." console.log("The offset of the current displayed text is " + fullText.indexOf(nodeText)); // output: The offset of the current displayed text is 32 请记住，可能有某种方法可以使用 EPUB 文件执行此操作，并且它的框架已经内置，我对 EPUB 文件了解不多。但这将是一种在整个文本中查找文本切片位置的方法。

javascript dom webview

回答 1 投票 0

汉堡菜单适用于 Firefox，但不适用于基于 chromium 的浏览器

在我的 React 应用程序中，我有一个汉堡菜单，可以在 Firefox 上按预期运行，但它在 Chrome 上不起作用，并且我没有收到控制台错误。这是负责处理汉堡的脚本

javascript css reactjs dom hamburger-menu

回答 1 投票 0

最后一个<tr>不在单独的行上。它与我使用 colspan 和 rowspan 的倒数第二行平行出现

我有一个表，其中第一列跨越 8 行，而其他列与之平行。倒数第二行应与其平行，同时跨越 3 行和 3 列。最后一行应该在单独的r上...

html css dom html-table

回答 2 投票 0

如何聚焦加载我的反应应用程序的选项卡

我有一个要求，如果我收到一个特定的套接字，那么如果该选项卡最小化，它应该最大化并且焦点应该位于该选项卡上。我已经尝试过 window.focus() 但它不起作用

javascript dom

回答 1 投票 0

为什么React重新渲染过程不会改变checkbox的值？

我刚刚用 onChange 事件处理程序创建了一个输入框，并且有一个复选框。我将复选框单击为 true，然后在输入框中键入，这将重新渲染组件，因为它具有 useState 挂钩...

javascript reactjs dom

回答 1 投票 0

Angular - 如何检查组件标签是否具有特定属性？

我按以下方式使用app-some组件如何检查 app-somecomponent 是否具有 app-somecompo 中所需的属性...

javascript angular dom

回答 4 投票 0

js for 循环innerHTML 函数在加载相同id 时不起作用

for循环innerHTML +=不起作用富巴 document.getElementById('outSecs').</desc> <question vote="-1"> <p>在 addeventlistener 负载上调用函数时，for 循环 insideHTML += 不起作用</p> <pre><code><main id='outSecs'> foobar </main> <script> document.getElementById('outSecs').addEventListener('load', myFn); function myFn() { for (var q = 1; q <= 9; q++) { document.getElementById('outSecs').innerHTML += "<section><p class='myOutput'></p></section>"; } } </code></pre> <p>如何在加载时插入带有innerHTML的循环代码？</p> </question> <answer tick="false" vote="0"> <p>我建议你使用窗口的 DOMContentLoaded 事件。</p> <p>代码也可以更优雅。无需每次都获取主容器。只需获取一次并填充即可。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const myFn = () => { const mainContainer = document.getElementById('outSecs'); mainContainer.innerHTML = Array.from({ length: 9 }) .map((_, i) => `<section id="s${i}"><p class="myOutput">${i+1}</p></section>`) .join('') }; window.addEventListener('DOMContentLoaded', myFn)</code></pre> <pre><code><main id='outSecs'> foobar </main></code></pre> </div> </div> <p></p> </answer> </body></html>

javascript html dom addeventlistener getelementbyid

回答 0 投票 0

onblur 事件阻止 onclick

尝试选择下拉列表中的项目。当我尝试单击该项目时，由于 onBlur，它没有单击。我看到很多带有 onMouseDown 的解决方案，但很多人说这不是

javascript reactjs dom

回答 1 投票 0

documnt.addEventListener 导致“未捕获的类型错误‘属性handleEvent’不可调用。”

我有一个简单的 HTML 文件，它加载脚本“asyncLoader.js”： ...

dom firefox addeventlistener

回答 1 投票 0

javascript如何找到包含文本的DOM节点？

给定一个获取的html页面，我想找到包含一部分文本的特定节点。我想最困难的方法是一一迭代所有节点，尽可能深入，然后......