dom 相关问题

动态加载元素内的Htmx功能，通过自定义JS在动态加载元素上初始化htmx

动态加载具有 htmx 属性的元素后，htmx 功能似乎不会在动态加载的元素上激活。重要的是要知道动态加载的元素......

if 命令和其余命令正确吗？

我正在尝试制作它，以便它可以显示该元素是否是cadetblue。 代码： ＃笨蛋{ 背景颜色：cadetblue； </desc> <question vote="0"> <p>我正在尝试制作它，以便它可以显示该元素是否是 cadetblue 。 代码：</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; #idiot{ background-color:cadetblue; border-top-left-radius:50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-right-radius: 50%; width: 100px; height: 30px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p id=&#34;idiot-background-p&#34;&gt;The button is Cadet Blue.&lt;/p&gt; &lt;div id=&#34;idiot&#34;&gt;&lt;/div&gt; &lt;script&gt; if(document.getElementById(idiot).style.background-color !== &#39;cadetblue&#39;){ document.getElementById(idiot-background-p).innerHTML=&#34;The button is not Cadet Blue&#34;; }; &lt;/script&gt; </code></pre> <p>当我将背景颜色更改为黑色时，它仍然显示</p><p>为“按钮是学员蓝色”。 可能只是我因为新而忘记了一些东西，但我不确定。</p> </question> <answer tick="false" vote="0"> <p>您的 JavaScript 代码中存在一些语法错误。</p> <p>首先，<pre><code>document.getElementById</code></pre>需要一个字符串或一个包含字符串（你的id的字符串名称）的变量，在这种情况下，看起来你试图通过id“idiot”获取一个元素，所以正确的方法为此，请在 ID 的开头和结尾添加单引号或双引号。 <pre><code>idiot-background-p</code></pre>也是如此。</p> <p>并且，在 <pre><code>styles.background</code></pre> 和 <pre><code>color</code></pre> 中间有一条斜线，而它应该没有斜线</p> <p>固定代码：</p> <pre><code>&lt;script&gt; if(document.getElementById(&#34;idiot&#34;).style.backgroundColor !== &#39;cadetblue&#39;){ document.getElementById(&#34;idiot-background-p&#34;).innerHTML=&#34;The button is not Cadet Blue&#34;; }; &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="0"> <p>您缺少在 <pre><code>getElementById</code></pre> 上标注元素的名称，它使用字符串来查找元素。如果您使用了变量，那么您可以删除 cuotes。</p> <p>此外，JavaScript 上的 CSS 属性 <pre><code>background-color</code></pre> 是 <pre><code>backgroundColor</code></pre>。如果您使用某种类型的 IDE（如 <a href="https://code.visualstudio.com/" rel="nofollow noreferrer">VSCode</a>），它会建议您正确的 IDE：</p> <p><a href="https://i.stack.imgur.com/CglAr.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL0NnbEFyLnBuZw==" alt=""/></a></p> <p>脚本标签应如下所示：</p> <pre><code>&lt;script&gt; if ( document.getElementById(&#39;idiot&#39;).style.backgroundColor !== &#39;cadetblue&#39; ) { document.getElementById(&#39;idiot-background-p&#39;).innerHTML = &#34;The button is not Cadet Blue&#34;; } &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="-1"> <p>文本仍然显示“按钮是学员蓝色”的原因是因为您正在使用 style.background-color 属性检查 id idiot 元素的背景颜色。此属性返回元素的当前背景颜色，而不是样式表中设置的原始背景颜色。</p> <p>要解决此问题，您需要使用 backgroundColor 属性而不是 style.background-color 属性。无论当前背景颜色是什么，backgroundColor 属性都会返回元素的原始背景颜色。</p> <p>试试这个：</p> if(document.getElementById(白痴).backgroundColor !== 'cadetblue'){ document.getElementById(idiot-background-p).innerHTML="该按钮不是 Cadet Blue"; }; </answer> </body></html>

尝试通过javascript启用和禁用CSS文件

我有2个不同的css文件，我想动态地使用它们。我有一个移动预览按钮，它将更改为另一个 css 文件，并将相同的按钮文本更改为桌面预览，并且...

如何延迟“轮子”事件？

所以我有这段代码，在使用鼠标滚轮或触摸板时将视图更改为部分数组中的下一个 div。但是，当我使用触摸板时，它无法正常工作，因为每次......

手动dispatchEvent DOMContentLoaded

有什么方法可以手动触发 DOMContentLoaded 事件吗？ 我正在尝试为一些客户端 JavaScript 编写一个单元测试，该测试在 DOMContentLoaded 事件上执行一些操作。 以下做了...

in 语句中的reset() 函数无论条件如何都会执行？

我有这样的 HTML 表单： 我有这个 HTML 表单： <form id="main"> <p1> <p1 id="introduction"></p1> <br> <br> <p1 id="annualGoals"></p1><br> <p1 id ="monthlyBudget"></p1> </p1> <br><br><br><br> <div id="finish"> Reset (Yes/No)?<br> <input type="text" id="reset"><br><br> <input type="submit" id="submit" value="submit" onclick="clear()"><br><br> <p1 id="error">We're unable to complete your request, please refresh the page to try again.</p1> </div> </form> 在 Javascript 中连接到此函数的 onclick 应该仅在输入为“是”时清除表单，否则使用 css 默认情况下隐藏的显示。 function clear() { if (document.getElementById("reset").textContent == "Yes") { document.getElementById("main").reset() return } const err = document.getElementById("error"); err.style.visibility = "visible"; document.querySelector('#submit').disabled = true; } 目前，无论输入什么，该功能都会重置表单。我尝试通过添加 else 条件来处理函数 if 语句，以防输入为“否”，但即使没有输入，它也会重置表单。我对 Javascript 很陌生，所以一定有一些我在逻辑中没有看到的东西。 您面临的问题与您尝试访问输入值并检查它是否等于“是”的方式有关。要获取输入值，您应该使用“.value”而不是“.textContent”。另外，请务必将其与“Yes”（大小写正确）进行比较，并在不是“Yes”时进行处理。 这是更正后的 JavaScript 函数： function clear() { var resetInput = document.getElementById("reset").value; if (resetInput === "Yes") { document.getElementById("main").reset(); } else { const err = document.getElementById("error"); err.style.visibility = "visible"; document.querySelector('#submit').disabled = true; } } 在此代码中，我们首先使用“document.getElementById("reset").value”检索“reset”输入字段的值。然后，我们将其与“Yes”（具有正确的大小写）进行比较，以决定是否重置表单或显示错误消息。如果不是“是”，它将显示错误消息并禁用提交按钮。

元素不充当值的占位符？

我有点卡在这里，作为一个有抱负的网络开发人员，我在这个项目上取得了很多进展，但无法弄清楚这个功能。无法弄清楚为什么我的事件侦听器不重新...

文件大小达到约 8kb 后，字符串转 CSV 失败

当我增加 dataString 时，我收到此错误（在大约 8kb 文件大小之后）。 DOMException：无法在“Window”上执行“btoa”：要编码的字符串包含 Latin1 r 之外的字符...

错误消息：“无法克隆传递的参数 [[object HTMLHeadElement]]”

我想在控制台中的 JavaScript 中将元素显示为 HTML DOM 中的对象，以便查看该对象的“树”模式。但如果我这样做，我得到的信息是： “C...

如何仅在页面完全加载后才移动到页面锚点？

我尝试在我的网站上使用页面锚点，但遇到问题，因为内容是从 JSON 动态加载的，因此页面锚点在内容绘制和完全加载之前触发。

为什么我在这里得到“NaN”？

我正在尝试制作一个简单的计算器，但是，当我尝试将两个数字相加时，我得到了“NaN”结果。 在此问题之前，函数 sumar() 返回“[object

如何从正文中而不是从标题中选择所有div？

我使用此 JavaScript 代码来选择所有 DIV 并更改其颜色。我不想改变标题中 DIV 的颜色。此任务的目的是学习 HTML5、DOM、Javascript 和

HTML5 <article> 适用于电子商务产品

新的 HTML5 文章标签看起来非常伟大和美妙，这里和其他地方已经有很多关于它的用途的讨论。 不幸的是，所有这些讨论似乎都是在......

将输入框焦点放在加载上

如何在页面加载时光标聚焦在特定输入框上？ 是否也可以保留初始文本值并将光标放在输入末尾？ 如何在页面加载时光标聚焦到特定输入框？ 是否可以保留初始文本值并将光标置于输入末尾？ <input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" /> 您的问题分为两部分。 1）如何在页面加载时集中输入？ 您只需将 autofocus 属性添加到输入即可。 <input id="myinputbox" type="text" autofocus> 但是，这可能并非所有浏览器都支持，因此我们可以使用 javascript。 window.onload = function() { var input = document.getElementById("myinputbox").focus(); } 2）如何将光标置于输入文本的末尾？ 这是一个非 jQuery 解决方案，其中包含一些从 另一个 SO 答案 借来的代码。 function placeCursorAtEnd() { if (this.setSelectionRange) { // Double the length because Opera is inconsistent about // whether a carriage return is one character or two. var len = this.value.length * 2; this.setSelectionRange(len, len); } else { // This might work for browsers without setSelectionRange support. this.value = this.value; } if (this.nodeName === "TEXTAREA") { // This will scroll a textarea to the bottom if needed this.scrollTop = 999999; } }; window.onload = function() { var input = document.getElementById("myinputbox"); if (obj.addEventListener) { obj.addEventListener("focus", placeCursorAtEnd, false); } else if (obj.attachEvent) { obj.attachEvent('onfocus', placeCursorAtEnd); } input.focus(); } 这是我如何使用 jQuery 完成此任务的示例。 <input type="text" autofocus> <script> $(function() { $("[autofocus]").on("focus", function() { if (this.setSelectionRange) { var len = this.value.length * 2; this.setSelectionRange(len, len); } else { this.value = this.value; } this.scrollTop = 999999; }).focus(); }); </script> 请注意 - 对于支持它的浏览器，您现在可以使用 HTML5 执行此操作，无需使用 JavaScript： <input type="text" autofocus> 您可能想从此开始并使用 JavaScript 进行构建，为旧版浏览器提供后备。 $(document).ready(function() { $('#id').focus(); }); function focusOnMyInputBox(){ document.getElementById("myinputbox").focus(); } <body onLoad="focusOnMyInputBox();"> <input type="text" size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text"> 执行此操作的一种可移植方法是使用自定义函数（处理浏览器差异），例如 this one。 然后在 onload 标签末尾为 <body> 设置处理程序，如 jessegavin 所写： window.onload = function() { document.getElementById("myinputbox").focus(); } 非常简单的一行解决方案： <body onLoad="document.getElementById('myinputbox').focus();"> 工作正常... window.onload = function() { var input = document.getElementById("myinputbox").focus(); } 尝试： 纯Javascript： [elem][n].style.visibility='visible'; [elem][n].focus(); Jquery： [elem].filter(':visible').focus(); 这对我来说效果很好： <form name="f" action="/search"> <input name="q" onfocus="fff=1" /> </form> fff 将是一个全局变量，其名称完全无关，其目的是停止通用 onload 事件以强制将焦点放在该输入上。 <body onload="if(!this.fff)document.f.q.focus();"> <!-- ... the rest of the page ... --> </body> 来自：http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html 如果由于某种原因无法添加到 BODY 标签，您可以在表单之后添加： <SCRIPT type="text/javascript"> document.yourFormName.yourFieldName.focus(); </SCRIPT> 将其添加到 js 的顶部 var input = $('#myinputbox'); input.focus(); 或转为 html <script> var input = $('#myinputbox'); input.focus(); </script> 就做吧！ window.onload = function() { setTimeout(function () { document.getElementById("input-box-id").focus(); document.getElementById("input-box-id").click(); }, 1000); }

通过 JavaScript 添加列表项

所以，我试图打印一个数组，将用户输入的文本添加到其中，但我想要打印的是数组的有序列表。正如您所看到的，（如果您运行我的代码）列表项只是...

如何修复 AsyncStorage 已从 React-Native 核心中删除

我尝试使用 Firebase 验证我的注册，因此在注册屏幕上，仅当我从 '../firebase' 导入 { auth } 时才会出现错误；如果我评论它，代码工作正常，但如果尝试使用它......

Javascript 自动刷新类元素

问题： 数据库上的值不断变化。需要自动重新加载某些元素值而不重新加载所有页面。与附图所示的集体招标页面非常相似。 一个简单的页面仪表板...

实时求和输入字段中的数字并显示 Javascript

我正在尝试弄清楚如何将输入数字求和并显示为实时计算。 它有点有效，但计算是错误的。每次迭代都会添加更大的数字，就像算术中一样......

需要创建一个仅接受 a-z、A-Z 和空格中的字母的输入元素

在页面上创建一个输入元素，其中包含占位符“输入您的姓名”和 HTML 内页面上的 H2 标题。 此输入元素的目的是输入用户名，因此它应该只输入...

如何将“所需”id 传递给由多个 g 组成的内联 SVG？

我使用预先提供给我的 SVG，并使用类似于下面的 和 元素进行定义（为了简单起见，我删除了大部分路径元素内容）： 我正在使用预先提供给我的 SVG，并使用类似于下面的 <defs> 和 <g> 元素进行定义（为了简单起见，我删除了大部分 path 元素内容）： <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 96 96" fill="none"> <defs> <path id="singlecolor" d="M94.9588 20.6182L86.2126 5.20824V5H84.9631H68.5119H66.6377L66.4295"/> <g id="multicolor"> <path d="M48 73.2971L52.7543 81.8L57.6 90.3943H48H38.4L43.1543 81.8L48 73.2971Z" fill="#E92D78" /> </g> </defs> <g id="multicolor-onLight"> <use href="#multicolor"/> </g> <g id="multicolor-onDark"> <use href="#multicolor"/> </g> <g id="singlecolor-onDark"> <use href="#singlecolor"/> </g> </svg> 如今，此 SVG 作为独立文件并在 img 标签中呈现，并且 src 属性包含锚点标签，例如 src='myfile.svg#multicolor-onLight'。这“选择”最终渲染的内容，在这种情况下，在 <g> 下定义的路径，id 为“multicolor”。 将来，我想重新使用相同的 SVG，但内联在我的代码中。有没有办法重用与内联 SVG 相同的 SVG 代码，更具体地说，如何选择将渲染哪个 <g> 元素？ 我将 <svg> 内联放入 <div> 标签中，并尝试在两者上设置 Id，但这没有什么区别。似乎只渲染了“第一个”定义的路径...... 使用 Web 组件创建内联 SVG，可使用属性进行配置。 customElements.define("my-svg", class extends HTMLElement { connectedCallback(){ this.style.display = "inline-block"; this.style.width = "100px"; this.style.background = "pink"; this.innerHTML = `<svg viewBox="0 0 96 96" style="vertical-align:top"> <circle cx="50%" cy="50%" r="50%" fill="${this.getAttribute("fill") || "red"}"></circle> </svg>` } }); <my-svg></my-svg> <my-svg fill="yellow"></my-svg> <my-svg fill="blue"></my-svg> 您的 id 问题是因为内联 SVG 将使用页面上第一个定义的 id。 要解决此问题，请在上面的 Web 组件中创建一个唯一的 id 或者向您的 Web 组件添加额外的 ShadowRoot 来封装所有内容。 请参阅：是否可以在 SVG 中使用动态 id fill=url(#)