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() 但它不起作用