dom 相关问题

如何使用 addEventListener 更改全局变量？

我正在尝试使用 addEventListener 更改 userSelection 变量。底部的 console.log 没有显示任何内容，但是当我放置在按钮变量中时，我得到了想要的结果。我

在 Chrome 控制台中不断收到错误消息 - GET 404（未找到）

我正在尝试创建一个小型记忆卡游戏作为初学者项目。 页面结构+目标： 总共有 6 张卡片和 2 个按钮。 目标：如果你点击重置按钮，它应该改变 s...

为什么选项元素不附加在两个选择标签内只附加在最后一个选择标签？

HTML： HTML: <div class="from"> <select name="" class="droplistOptions" > <!--insert option element here--> </select> </div> <p class="to-seprator">To</p> <div class="to"> <select name="" class="droplistOptions" > <!--insert option element here also --> </select> </div> JavaScript代码： const droplists = document.querySelectorAll('.droplistOptions'); countryNames = ['usa', 'India', 'china', 'japan']; countryNames.forEach((country) => { const optionElement = document.createElement('option'); optionElement.value = country; optionElement.textContent = country; droplists.forEach((item) => item.append(optionElement)); }); 在上面的代码中，我想将 countryNames 数组中的所有国家/地区名称作为选项元素插入到 html 中的两个选择标记中，但是当我使用附加时，它仅将选项元素附加到 html 中的最后一个或第二个选择标记中，并且第一个选择标记为空第一个选择标签内没有插入选项元素。我不知道我在做什么错误。我想了解为什么它像这样工作它应该在选择标签的两个位置附加选项元素，因为 droplists 是 nodelist 数组和 forEach 迭代每个元素如此 您创建的optionsElement然后附加到第一个列表，然后附加（移动）到第二个列表。 深度克隆 添加之前的元素： const droplists = document.querySelectorAll(".droplistOptions"); const countryNames = ['usa', 'India', 'china', 'japan'] countryNames.forEach((country) => { const optionElement = document.createElement("option"); optionElement.value = country; optionElement.textContent = country; droplists.forEach((item) => item.append(optionElement.cloneNode(true))); }); <div class="from"> <select name="" class="droplistOptions"> <!--insert option element here--> </select> </div> <p class="to-seprator">To</p> <div class="to"> <select name="" class="droplistOptions"> <!--insert option element here also --> </select> </div> 或者为每个列表创建一个新元素： const droplists = document.querySelectorAll(".droplistOptions"); const countryNames = ['usa', 'India', 'china', 'japan'] countryNames.forEach((country) => { droplists.forEach((item) => { const optionElement = document.createElement("option"); optionElement.value = country; optionElement.textContent = country; item.append(optionElement); }); }); <div class="from"> <select name="" class="droplistOptions"> <!--insert option element here--> </select> </div> <p class="to-seprator">To</p> <div class="to"> <select name="" class="droplistOptions"> <!--insert option element here also --> </select> </div> 如果你有一个很长的列表，最好创建一个片段，将所有 optionElement 节点附加到片段，然后将片段的克隆附加到列表。通过这种方式，您将避免对 DOM 进行多次连续更改： const droplists = document.querySelectorAll(".droplistOptions"); const countryNames = ['usa', 'India', 'china', 'japan'] const fragment = new DocumentFragment(); countryNames.forEach((country) => { const optionElement = document.createElement("option"); optionElement.value = country; optionElement.textContent = country; fragment.append(optionElement); }); droplists.forEach((item) => { item.append(fragment.cloneNode(true)); }); <div class="from"> <select name="" class="droplistOptions"> <!--insert option element here--> </select> </div> <p class="to-seprator">To</p> <div class="to"> <select name="" class="droplistOptions"> <!--insert option element here also --> </select> </div> 你不能在 DOM 的不同地方插入相同的标签。它是相同的元素，当您调用“追加”时，它会将您的选项带到第一个<select>，然后将其替换为第二个，插入不能作为克隆. 您需要为每个列表创建新的<option>： const droplists = document.querySelectorAll(".droplistOptions"); countryNames = ['usa','India','china','japan'] countryNames.forEach((country) => { droplists.forEach((item) => { const optionElement = document.createElement("option"); optionElement.value = country; optionElement.textContent = country; item.append(optionElement)); }); }); 因为您只在 option 循环中创建一个 .forEach 元素 - 每次调用 select 时，您都会将元素从第一个 .appends 元素移动到第二个元素。 有很多方法可以解决这个问题，但我喜欢使用 innerHTML，即使您会在编辑器中丢失语法语义。这将更加高效，因为您避免了对象操作，并且垃圾收集器不需要管理不必要的 DOM 元素对象。 此外，请考虑在代码中使用更合适的 for...of 循环，而不是 .forEach 结构。 .forEach 实际上只存在于迭代未分配的数组。同样，这也将带来性能优势，因为您不需要将函数对象和闭包存储在 .forEach 方法创建的内存中。 const droplists = document.querySelectorAll('.droplistOptions'); const countryNames = ['usa', 'India', 'china', 'japan']; for (const country of countryNames) { for (const list of droplists) { item.innerHTML = `${list.innerHTML}<option value="${country}">${country}</option>`; } } <div class="from"> <select name="" class="droplistOptions"> <!--insert option element here--> </select> </div> <p class="to-seprator">To</p> <div class="to"> <select name="" class="droplistOptions"> <!--insert option element here also --> </select> </div>

Angular - 如何更改由 TS

我正在尝试将一些样式应用到使用 TypeScript 的 CreatElement 创建的 div，但未应用样式。 编辑：我设法通过在 st 中应用样式来解决问题...

XML DOM 中的元素如何更新？

到目前为止，这是我的理解： DOM 是网页上所有称为对象的元素的图形表示。这些对象/元素显示并构造为树...

如何合并contenteditable parent的两个子相邻子元素的文本节点

我正在使用 contenteditable 构建一个非常简单的文本编辑器，我发现 Firefox 和其他浏览器之间的行为不一致。 基本的 HTML 看起来像这样： 我正在使用 contenteditable 构建一个非常简单的文本编辑器，我发现 Firefox 和其他浏览器之间的行为不一致。 基本的 HTML 看起来像这样： <div class="snippet" contenteditable> <div class="word"> <span>If </span> </div> <div class="word"> <span>I </span> </div> <div class="word"> <span>if </span> </div> 我们的最终用户希望能够从这些相邻的.word节点中部分选择文本，并删除选择的内容。比如从上面的HTML中，一个选择如I|f I i|f（从第一个f到最后一个i，包括），他们希望能够删除中间部分，这样： 第一个I的span，和 上次的fspan 合并在一起成为If. 在 Firefox 上，用退格键删除选中的文本后，DOM 看起来像这样： <div class="snippet" contenteditable> <div class="word"> <span>I </span> <span>f </span> </div> </div> 虽然笨拙，但我可以使用它，并且我使用 word.innerText 重建初始结构（<span> 元素内只允许一个 <div class="word">）。 在其他浏览器上，用退格键删除选中的文本后，结果是这样的： <div class="snippet" contenteditable> <div class="word"> <span>I </span> </div> <div class="word"> <span>f </span> </div> </div> 有什么方法可以使浏览器之间的删除行为保持一致以获得所需的输出吗？ <div class="word"> <span>If </span> </div> 这里是我在 Firefox 上使用的 JS 函数来抓取所有的单词并重新渲染： const getWordsFromNode = (target) => { // Grab all the children and re-construct a words list const wordElements = Array.from(target.children); const words = []; // Check if each word element has two or more span elements. If yes, // include all of the innerText in the first item, rest will be empty strings wordElements.forEach((element) => { const wordChildren = Array.from(element.children); // This works on Firefox due to the way it handles deleting children wordChildren.forEach((word, index) => { if (index === 0) { words.push(element.innerText.trim()); } else { words.push(''); } }); }); return words; }; const snippet = document.querySelector('.snippet'); // I iterate over this array to re-render the words const words = getWordsFromNode(snippet);

如何使用 Puppeteer 从 SVG DOM 在浏览器中构造 DOM 文档

我正在使用 Puppeteer 加载包含 SVG 文档的页面，但稍后需要使用 Javascript 对其进行处理。因此，拥有一个带有标签 page.addScript() 的页面可以正常工作。 但是当只有 SVG 文件是 ...

XPath：获取标题后的第一段

我想向我的站点添加一个 FAQPage 架构。 为此，我需要找到每个带有问号的 或 标签。这就是问题所在。 之后我需要第一个 ... 我想添加一个 FAQPage 架构 到我的网站。 为此，我需要找到每个带有问号的 <h2> 或 <h3> 标签。这就是问题所在。 之后我需要标题后的第一个<p>标签作为答案。 最终结果应该是这样的： { "@type": "Question", "name": "How long does it take to process a refund?", "acceptedAnswer": { "@type": "Answer", "text": "CONTENT FROM FIRST P-TAG", "url": "https://www.example.com/answer#anchor_link" } } 问题的"name"是<h2>或<h3>标签。 答案的"url"是永久链接和来自<h2>或<h3>标签的锚链接。 这两个参数就解决了 不幸的是，我无法弄清楚如何在标题标签之后获取第一个段落标签。 我需要下一行第一段的内容： "text": "CONTENT FROM FIRST P-TAG", 到目前为止，这是我当前的代码： <?php $content_postid = get_the_ID(); $content_post = get_post($content_postid); $content = $content_post->post_content; $content = apply_filters('the_content', $content); $content = str_replace(']]>', ']]&gt;', $content); libxml_use_internal_errors(true); $dom = new DOMDocument; $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content); $xp = new DOMXPath($dom); $query = "//h2[contains(., '?')] | //h3[contains(., '?')]"; $nodes = $xp->query($query); $stack = []; if ($nodes) { $faq_count = count($nodes); $faq_i = 1; echo ' <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": ['; foreach($nodes as $node) { echo '{ "@type": "Question", "name": "'.$node->nodeValue.'", "acceptedAnswer": { "@type": "Answer", "text": "CONTENT FROM FIRST P-TAG", "url": "'.get_permalink().'#'.$node->getAttribute('id').'" } }'; if ($faq_i != $faq_count) : echo ','; endif; $faq_i++; } echo ']}</script>'; } ?> 如您所见，我正在使用这一行来查找每个带有<h2>的<h3>或?标签： $query = "//h2[contains(., '?')] | //h3[contains(., '?')]"; 我想我需要第二个$query才能找到标题后的parapgrah？但是如何检查标题后的第一个标签？ 我试过这个额外的查询： $query2 = "//h2[contains(., '?')]/following-sibling::p[1] | //h3[contains(., '?')]/following-sibling::p[1]"; 但是following-sibling::和following::都不适合我。 它总是显示最后一个标题之后的段落。 我需要解决第一个查询吗？想知道我是什么水平？ 这是一个$content_post的例子（它总是不同的）： <h2>Lorem ipsum dolor sit amet?</h2> <p>consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim</p> <p>veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h3>Duis autem vel eum?</h3> <p>iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <h2>Nam liber tempor cum soluta?</h2> <h3>nobis eleifend option congue nihil</h3> <p>imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Et wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <h3>Duis autem vel?</h3> <p>eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> <h4>Nam liber tempor cum soluta nobis</h4> <p>eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>

选择范围内“开始”和“结束”的具体定义

使用 DOM 标准： 为方便起见，范围的开始节点是它的开始节点，它的开始偏移量是它的开始偏移量，它的结束节点是它的结束节点，它的结束偏移量是它的结束偏移量。 乙...

WordPress：在 <p> 标签后找到第一个 <h2> 并添加提取的前 150 个字符

我想向我的站点添加一个 FAQPage 架构。为此，我需要找到每个 标签和它后面的第一个 标签。 最终结果应如下所示： { "@type": " 我想在我的网站上添加一个 FAQPage 架构。为此，我需要找到每个 <h2> 标签和它后面的第一个 <p> 标签。 最终结果应该是这样的： { "@type": "Question", "name": "How long does it take to process a refund?", "acceptedAnswer": { "@type": "Answer", "text": "The first 150 chars from the first <p> tag", "url": "https://www.example.com/answer#anchor_link" } } 问题的"name"是<h2>标签。 答案的"url"是永久链接和<h2>标签的锚链接。 这两个参数就解决了 不幸的是，我无法弄清楚如何在<p>标签之后获得第一个<h2>标签。 到目前为止，这是我当前的代码： <?php $content_postid = get_the_ID(); $content_post = get_post($content_postid); $content = $content_post->post_content; $content = apply_filters('the_content', $content); $content = str_replace(']]>', ']]&gt;', $content); libxml_use_internal_errors(true); $dom = new DOMDocument; $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content); $xp = new DOMXPath($dom); $query = '//*[contains("h2", name())]'; $nodes = $xp->query($query); $currentLevel = ['level' => 0, 'count' => 0]; $stack = []; if ($nodes) { $faq_count = count($nodes); $faq_i = 1; echo ' <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": ['; foreach($nodes as $node) { $level = (int)$node->tagName[1]; while($level < $currentLevel['level']) { $currentLevel = array_pop($stack); } if ($level === $currentLevel['level']) { $currentLevel['count']++; } else { $stack[] = $currentLevel; $currentLevel = ['level' => $level, 'count' => 1]; } echo '{ "@type": "Question", "name": "'.$node->nodeValue.'", "acceptedAnswer": { "@type": "Answer", "text": "TEST <a href='.get_permalink().'#'.$node->getAttribute('id').'>more</a>", "url": "'.get_permalink().'#'.$node->getAttribute('id').'" } }'; if ($faq_i != $faq_count) : echo ','; endif; $faq_i++; } echo ']}</script>'; } ?> 如你所见，我正在使用这条线来查找每一个<h2>： $query = '//*[contains("h2", name())]'; 我想我需要第二个$query来找到<p>标签。但是我如何检查<h2>之后的第一个标签？ 如何将前 150 个字符添加到此行而不是TEST： "text": "TEST <a href='.get_permalink().'#'.$node->getAttribute('id').'>more</a>", 我在这里找到了一个answer，它与childNodes一起使用。也许这可能是一个解决方案？ 这个答案也很有帮助。我试着做这样的事情： foreach($nodes as $n) { $p_text = $xp->query('following::p', $n)->item(0)->nodeValue; // only the first 150 chars $p_text_out = mb_strlen($p_text) > 150 ? mb_substr($p_text,0,150)."..." : $p_text; } following::p有点……但它总是第一个<p>标签。

如何在我使用其中的元素之前检查我的表单步进步骤是否已完成渲染？

我正在使用 angular2-wizard 填写银行账户详细信息。在我的第二步中，我要求提供帐户信息（号码、cvc、到期日期），这些元素来自使用 ngx-stripe 库的 Stripe.js ...

使用 JS 控制台删除推文

我正在尝试删除我 Twitter 页面上 JS 控制台中的推文。 如果我通过选择按钮然后单击来手动执行此操作，我可以手动运行 3 个不同的功能。 const delButton=()=&...

使用 window.open 时检测页面何时通过 Javascript 加载用 JS 打开窗口...</desc> <question vote="0"> <p>我在 SO <a href="https://stackoverflow.com/questions/3960193/javascript-to-detect-when-a-page-has-loaded-in-another-window-in-firefox">1</a>、<a href="https://stackoverflow.com/questions/2145619/how-can-we-know-when-pop-up-window-url-is-loaded-window-open">2</a> 中查看了其他解决方案，但没有一个解决方案对我有用。考虑以下代码：</p> <pre><code><!DOCTYPE html> <html> <head> <title>Opening window with JS</title> <script> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.document.addEventListener('DOMContentLoaded', () => { console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; }); } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </script> </head> <body> <button id="open">Open window</button> </body> </html> </code></pre> <p>当窗口打开时，我没有看到任何登录到控制台的内容，页面的背景也没有改变。</p> <p>我也尝试将此添加到我的<pre><code><script></code></pre>标签中：</p> <pre><code>const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.onload = () => { console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; }; } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </code></pre> <p>那也不行。所以下一步是尝试将 JS 嵌入到新打开的窗口的 HTML 中（<pre><code><\/script></code></pre> 不是错字，它必须在字面上转义）：</p> <pre><code> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.document.write(` <!DOCTYPE html> <html> <head> <title>Child window</title> <script> const handleOnLoad = () => { console.info('Child window loaded'); window.body.style.background = 'hotpink'; } <\/script> </head> <body onload="handleOnLoad"> </body> </html> `); } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </code></pre> <p>然而，这并没有让我更接近。我该如何进行？</p> </question> <answer tick="false" vote="0"> <h3>时间问题</h3> <p>代码的问题可能是它试图在加载之前向子窗口的文档添加<pre><code>DOMContentLoaded</code></pre>事件侦听器。这意味着事件监听器实际上并没有添加成功。</p> <p>解决这个问题的一种方法是将事件监听器移动到子窗口的 HTML 代码中，并调用父窗口中定义的函数来更改背景颜色。</p> </answer> <answer tick="false" vote="0"> <p>需要使用document.readyState方法等待<strong>complete</strong>:</p> <p>有关信息，document.readyState<strong>complete</strong>：</p> <blockquote> <p>文档和所有子资源加载完成。该状态表示加载事件即将触发。</p> </blockquote> <p>您可以通过添加 <strong>setInterval</strong> 检查新窗口 readState 何时等于 <strong>complete</strong> 并在 readystate 为 <strong>complete</strong> 时清除 setInterval() 来解决您的问题。</p> <pre><code><!DOCTYPE html> <html> <head> <title>Opening window with JS</title> <script> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); const intervalId = setInterval(() => { if (win.document.readyState === 'complete') { clearInterval(intervalId); console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; } }, 100); }; document.addEventListener('DOMContentLoaded', () => { const openButton = document.getElementById('open'); openButton.addEventListener('click', () => { const win = openWindow(); }); }); </script> </head> <body> <button id="open">Open window</button> </body> </html> </code></pre> </answer> </body></html>

我在 SO 1、2 中查看了其他解决方案，但没有一个解决方案适合我。考虑以下代码： 用 JS 打开窗口...</desc> <question vote="0"> <p>我在 SO <a href="https://stackoverflow.com/questions/3960193/javascript-to-detect-when-a-page-has-loaded-in-another-window-in-firefox">1</a>、<a href="https://stackoverflow.com/questions/2145619/how-can-we-know-when-pop-up-window-url-is-loaded-window-open">2</a> 中查看了其他解决方案，但没有一个解决方案对我有用。考虑以下代码：</p> <pre><code><!DOCTYPE html> <html> <head> <title>Opening window with JS</title> <script> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.document.addEventListener('DOMContentLoaded', () => { console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; }); } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </script> </head> <body> <button id="open">Open window</button> </body> </html> </code></pre> <p>当窗口打开时，我没有看到任何登录到控制台的内容，页面的背景也没有改变。</p> <p>我也尝试将此添加到我的<pre><code><script></code></pre>标签中：</p> <pre><code>const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.onload = () => { console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; }; } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </code></pre> <p>那也不行。所以下一步是尝试将 JS 嵌入到新打开的窗口的 HTML 中（<pre><code><\/script></code></pre> 不是错字，它必须在字面上转义）：</p> <pre><code> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); win.document.write(` <!DOCTYPE html> <html> <head> <title>Child window</title> <script> const handleOnLoad = () => { console.info('Child window loaded'); window.body.style.background = 'hotpink'; } <\/script> </head> <body onload="handleOnLoad"> </body> </html> `); } document.addEventListener('DOMContentLoaded', (_) => { document.getElementById('open').addEventListener('click', (_) => openWindow()) }) </code></pre> <p>然而，这并没有让我更接近。我该如何进行？</p> </question> <answer tick="false" vote="0"> <h3>时间问题</h3> <p>代码的问题可能是它试图在加载之前向子窗口的文档添加<pre><code>DOMContentLoaded</code></pre>事件侦听器。这意味着事件监听器实际上并没有添加成功。</p> <p>解决这个问题的一种方法是将事件监听器移动到子窗口的 HTML 代码中，并调用父窗口中定义的函数来更改背景颜色。</p> </answer> <answer tick="false" vote="0"> <p>需要使用document.readyState方法等待<strong>complete</strong>:</p> <p>有关信息，document.readyState<strong>complete</strong>：</p> <blockquote> <p>文档和所有子资源加载完成。该状态表示加载事件即将触发。</p> </blockquote> <p>您可以通过添加 <strong>setInterval</strong> 检查新窗口 readState 何时等于 <strong>complete</strong> 并在 readystate 为 <strong>complete</strong> 时清除 setInterval() 来解决您的问题。</p> <pre><code><!DOCTYPE html> <html> <head> <title>Opening window with JS</title> <script> const openWindow = () => { const win = window.open('', '_blank', 'top=20, left=20, width=200, height=200'); const intervalId = setInterval(() => { if (win.document.readyState === 'complete') { clearInterval(intervalId); console.info('Child window loaded'); win.document.body.style.background = 'hotpink'; } }, 100); }; document.addEventListener('DOMContentLoaded', () => { const openButton = document.getElementById('open'); openButton.addEventListener('click', () => { const win = openWindow(); }); }); </script> </head> <body> <button id="open">Open window</button> </body> </html> </code></pre> </answer> </body></html>

尝试通过获取数据属性删除文档，返回 DOM 异常 - 有效选择器错误，即使在使用括号表示法查询时也是如此

我希望首先通过获取我最初在 DOM 中设置的数据属性来删除我的 firebase 集合中的文档。它工作得很好，但也有一些例外。我注意到它运作良好，因为...

如何以角度显示每个输入的字符数？

我在应用程序组件中有第一个和第二个输入，对于每个不同的输入更改，我想显示该特定输入的字符数/最大允许字符值仅在输入通道上...

我正在尝试删除按下按钮后出现在网站上的块

（函数（）{ document.addEventListener("keyup",(t=>{if("Numpad6"===t.code) {var e=document.createElement("输入"); e.type="按钮", e.val...

Velo：动态表不刷新

所以这很难解释，所以请耐心等待，如果有任何不清楚的地方，请问我。我正在尝试创建一个动态表，因此每个输入都保存在数据库中，然后在另一个站点上是

解析包含表格行的 html 片段

我从服务器返回以下响应。这是一个html片段。 我想像这样用 DOMParser 解析它： let responseText = '文本内容C...

一个标签中的多语言文本段落，行高大但偏移量不同

我不知道前端的正确技术术语来描述，这是我的期望： 使用 html 源代码： 这是一些英文文本。这是一个跨越的长句 我不知道前端的正确技术术语来描述，这是我的期望： 带有 html 源代码： <lingual> <p>This is some English text. It is a long sentence that spans multiple lines. The quick brown fox jumps over the lazy dog. This is another English sentence that is also quite long.</p> <p>이것은 일부 영어 텍스트입니다. 여러 줄에 걸쳐 긴 문장입니다. 빠른 갈색 여우가 게으른 개를 뛰어넘습니다. 이것은 또 다른 영어 문장이며, 매우 길기도합니다.</p> <p>これはいくつかの英語のテキストです。複数行にまたがる長い文章です。素早い茶色の狐がのろまな犬を飛び越えます。これはまた、かなり長い英語の文です。</p> </lingual> 希望开发一个html标签或css样式，包含多个语言段落，换行后可以列出每个语言。预计翻译人员可以方便地对比文本翻译。在很多文章和书籍中，一个段落可能会很大，如果将翻译的段落逐一列出，一旦切换到不同的语言，人们很容易丢失文本上下文并且难以追踪阅读进度。 所以这个“段落”之王的“行高”必须是line-height*(line_height_of_English + line_height_of_Korean + line_height_of_Japanese)，一些CSS属性如“字体大小”可能仍然适用于该段落，而有些则可能无效。如果只有一个语言段落，它看起来和普通段落一样。 是否有实施它或任何现有的伟大图书馆的想法？似乎浏览器只需要为每种语言文本呈现具有足够行距和不同起始位置的文本。我必须在画布上绘制文本吗？看起来处理换行和文本布局会很麻烦，其实和浏览器的逻辑是一样的 我找到了解决方案，至少可以看起来像我期望的效果。 重点是让container表现得像一个stack（flutter中是Stack，android中是FrameLayout），让children偏移一个特定的值： <html> <head> <style> .stack-layout { position: relative; border: solid 1px green; } .original { margin:0; line-height: 4em; position: relative; top: -1.5em; } .lingual { margin:0; line-height: 4em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; text-decoration: overline red; } </style> </head> <body> <p>Hope to develop a html tag or css style, containing multiple language paragraph.</p> <div class="stack-layout"> <p class="original">This is some English text. It is a long sentence that spans multiple lines. The quick brown fox jumps over the lazy dog. This is another English sentence that is also quite long.</p> <p class="lingual">이것은 일부 영어 텍스트입니다. 여러 줄에 걸쳐 긴 문장입니다. 빠른 갈색 여우가 게으른 개를 뛰어넘습니다. 이것은 또 다른 영어 문장이며, 매우 길기도합니다.</p> <p class="lingual" style="top:1.5em">これはいくつかの英語のテキストです。複数行にまたがる長い文章です。素早い茶色の狐がのろまな犬を飛び越えます。これはまた、かなり長い英語の文です。</p> </div> <p>Is there any idea for implementing it or any existing great library?</p> </body> </html> 行高值为line-height=<num of paragraphs>em + 0.5em*<num-1>。行高大时，文本的顶部位置与换行的顶部不对齐，我们偏移-1.5em并且每个孩子的顶部增加1.5em（1em的字体大小+ 0.5em的间距）。 错误： 文本选择：部分语言文本无法正确选择。 在某些情况下，例如原文有 2 条换行，而译文有 3 行，这会导致大量出现。

鼠标高亮文本周围的 HTML 标记标签

我试图让用户选择一段文本来执行命令。 我一直在尝试围绕用户用鼠标突出显示的文本部分创建标记标签。我...