dom 相关问题

通过文档对象模型，将此标记用于有关其他语言与XML / HTML交互的问题。不要将其用作HTML，JavaScript或SAX的简写 - 使用其他标记来表示语言和标记。

如何将根据一天中的时间变化的 JavaScript 图像设置为背景？

我的 HTML 有一个 id="image_1" 的标签。我的 JavaScript 函数告诉一天中的时间，并根据一天中的时间在三个图像之间变化。我想让图像适应...

javascript css image dom background

回答 1 投票 0

JS 事件侦听器，用于检查是否将具有特定 ID 的元素添加到 DOM [重复]

我想让JS在DOM中出现ID为#popup的元素时执行一段代码。是否有一个事件侦听器或类似的东西不需要运行一个循环来检查...

javascript html dom

回答 1 投票 0

如何修改 #shadow-root 中特定元素的 CSS（打开）

下面的例子。我将如何更改 SR 元素中 p 的显示？ #one ?SHADOW-ROOT-QUERY-SELECTOR? p {显示：无}；我的网站下面的例子。我将如何更改 SR 元素中 p 的显示？ #one ?SHADOW-ROOT-QUERY-SELECTOR? p { display: none}; <div> <p>My Website</p> <div id="one">  <div id="two"> <div id="three"> <p>Text</p> </div> </div> </div> </div> 您可以使用子选择器（#three p）或直接子选择器（#three > p）。对于直接子选择器，就像这样： #three>p { display: none; } <div> <p>My Website</p> <div id="one">  <div id="two"> <div id="three"> <p>Text</p> </div> </div> </div> </div> 这里有更多关于 CSS 选择器的内容 <div> <p>My Website</p> <div id="one">  <div id="two"> <div id="three"> <p style="display: none;">Text</p> </div> </div> </div> </div> 或： <div> <p>My Website</p> <div id="one">  <div id="two"> <div id="three"> <p>Text</p> </div> </div> </div> </div> <script> let threeEl = document.getElementById("three"); let threePEl = threeEl.querySelector("p"); threePEl.style.display = "none"; </script> 或者 CascadiaJS 的答案。

javascript html css xml dom

回答 2 投票 0

使用 Javascript 从下拉选择中更新输入字段值（在 Dubsado CRM 表单中）

我使用名为 Dubsado 的平台作为 CRM。他们允许您将自定义 HTML（包括标签）添加到他们的表单中，但我无法让这个特定的脚本工作，希望你们都可以...</desc> <question vote="0"> <p>我使用名为 Dubsado 的平台作为 CRM。他们允许您将自定义 HTML（包括 <script> 标签）添加到他们的表单中，但我无法让这个特定的脚本工作，希望大家能帮忙！</p> <p>问题看起来很简单：从下拉框中获取选定的值并将其写入文本输入字段。事实上，我已经成功地使用下面的代码在我自己的单独的 HTML 文件中执行了我尝试执行的操作（这也几乎与我添加到表单中的代码相同，保存我在其中的几点添加注释以解释差异）。但 Dubsado 一定有某种代码优先并阻止我编辑他们的输入字段。你能想出一种方法来覆盖/超越它吗？</p> <p>为了参考和测试，我创建了此表单的示例版本，您可以在<a href="https://hello.dubsado.com:443/public/form/view/640274e7a895b2c22a150cf8" rel="nofollow noreferrer">THIS LINK</a> 中查看。无论在下拉列表中选择什么值，也应该使用占位符“Photog 的名字出现在这里......”添加到输入字段。</p> <pre><code><p>Choose a photographer from the following:</p> <select id="photographerSelect"> <option>Photographer A</option> <option>Photographer B</option> <option>Photographer C</option> </select> <p id="printName">Photographer name goes here.</p>  <input class="form-element__input" autocomplete="off" placeholder="Photog's name appears here after selection above." value="" style="color: rgb(41, 46, 53); font-size: 14px;"> <script> { let selectedPhotographer = document.getElementById("photographerSelect"); let printArea = document.getElementById("printName"); let photogText = document.getElementsByClassName("form-element__input")[0]; // NOTE: In the actual Dubsado form, this variable declaration reads document.getElementById("label__6402719d5f8ab90000086e15").getElementsByClassName("form-element__input")[0]; as Dubsado does not assign an ID to any given input field, but does assign one to their parent containers. selectedPhotographer.addEventListener('change', (event) => { console.log(`Selected photographer is: ${event.target.value}`); printArea.textContent = `Selected photographer is: ${event.target.value}`; photogText.value = event.target.value; }); } </script> </code></pre> </question> </body></html>

javascript html dom

回答 0 投票 0

用户选择文本的持久标记

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

javascript html dom web-frontend

回答 0 投票 0

有没有办法检测提交前后表单值的变化？

我需要检测网页加载和保存页面之间的任何变化。是否有任何 DOM 属性？

javascript dom netsuite

回答 2 投票 0

在 DOM 中呈现插入元素时缺少空格

我从第三方供应商的平台上得到了一些非常奇怪的行为。我有字符串形式的 HTML 内容，我正在尝试替换 HTML 元素或节点（真的不在乎哪个......

javascript html dom nodes

回答 0 投票 0

选择元素上的 TypeScript 值约束

我现在为此苦苦挣扎了一段时间。我想创建一个 React 选择组件，其中 TS 可以从一组选项值中推断组件的值类型。比方说： const myFakeValueSet =...

reactjs typescript dom

回答 1 投票 0

通过JavaScript改变<style>元素的内容

问题我有以下代码：。我的风格 { 颜色：#FF0000； } 问题我有以下代码： <html> <head> <style id="ID_Style"> .myStyle { color : #FF0000 ; } </style> </head> <body> <p class="myStyle"> Hello World ! </p> </body> </html> 而我想通过JavaScript修改<style>的内容预期的解决方案第一个解决方案是使用 style 元素的 innerHTML 属性（通过它的 id 检索），但是当它在 Firefox 上工作时，它在 Internet Explorer 7 上失败。所以，我使用了纯 DOM 方法，即创建一个名为 style 的元素，一个包含所需内容的文本节点，并将该文本节点附加为样式节点的子节点，等等。它也失败了。根据MSDN，<style>元素有一个innerHTML属性，根据W3C，<style>元素是一个HTMLStyleElement，它派生自HTMLElement，派生自Element，派生自Node，有appendChild方法。它似乎表现得好像 <style> 元素的内容在 Internet Explorer 上是只读的。问题所以问题是：有没有办法在Internet Explorer上修改<style>元素的内容？虽然当前的问题是 IE7，但如果可能的话，跨浏览器的解决方案会很酷。附录来源：样式元素（MSDN）：http://msdn.microsoft.com/en-us/library/ms535898.aspx HTMLStyleElement (W3C)：http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977 完整的测试代码如果你想重现你的问题，你可以使用这个测试代码： <html> <head> <style id="ID_Style"> .myStyle { color : #FF0000 ; } </style> <script> function replaceStyleViaDOM(p_strContent) { var oOld = document.getElementById("ID_Style") ; var oParent = oOld.parentNode ; oParent.removeChild(oOld) ; var oNew = document.createElement("style") ; oParent.appendChild(oNew) ; oNew.setAttribute("id", "ID_Style") ; var oText = document.createTextNode(p_strContent) ; oNew.appendChild(oText) ; } function replaceStyleViaInnerHTML(p_strContent) { document.getElementById("ID_Style").innerHTML = p_strContent ; } </script> <script> function setRedViaDOM() { replaceStyleViaDOM("\n.myStyle { color : #FF0000 ; }\n") } function setRedViaInnerHTML() { replaceStyleViaInnerHTML("\n.myStyle { color : #FF0000 ; }\n") } function setBlueViaDOM() { replaceStyleViaDOM("\n.myStyle { color : #0000FF ; }\n") } function setBlueViaInnerHTML() { replaceStyleViaInnerHTML("\n.myStyle { color : #0000FF ; }\n") } function alertStyle() { alert("*******************\n" + document.getElementById("ID_Style").innerHTML + "\n*******************") ; } </script> </head> <body> <div> <button type="button" onclick="alertStyle()">alert Style</button> <br /> <button type="button" onclick="setRedViaDOM()">set Red via DOM</button> <button type="button" onclick="setRedViaDOM()">set Red via InnerHTML</button> <br /> <button type="button" onclick="setBlueViaDOM()">set Blue via DOM</button> <button type="button" onclick="setBlueViaInnerHTML()">set Blue via InnerHTML</button> </div> <p class="myStyle"> Hello World ! </p> </body> </html> 谢谢！编辑请注意，将 <style> 元素从 <head> 移动到 <body> 不会改变问题。动态生成 CSS 有其优势。如果您想在 IE 中设置样式元素的 innerHTML，请使用 styleSheet.cssText。例如：http://jsbin.com/awecu4 <!doctype html> <script> var style = document.createElement('style'), script = document.getElementsByTagName('script')[0], styles = '#test{background:green;}'; script.parentNode.insertBefore(style, script); try{style.innerHTML = styles;} //IE fix catch(error){style.styleSheet.cssText = styles;} </script> <div id=test>Div with id of test</div> 今天，在所有浏览器（包括我相信 IE9+）中，您可以在 textContent 元素上设置 style 的值，它会按照您想要的方式工作，包括选择器中的 >。在设置风格上，CSSStyleSheet.replaceSync()方法管用。还有.insertRule。如果您想从更大的字符串中插入，只需执行const mystylesheet = new CSSStyleSheet(".myClass{color:"green" ...}"); const stylesheet = new CSSStyleSheet(); stylesheet.replaceSync("h1 { color: blue; }"); document.adoptedStyleSheets = [stylesheet]; h1 { color: red; } <h1>Hello World</h1>

html dom coding-style

回答 3 投票 0

悬停时在 div 左侧显示 SVG？

How to "Show SVG on left side of div on Hover" using css 像这样的👇👇 图片要看我做了如何使用 css“在悬停时在 div 的左侧显示 SVG” 像这样的👇👇 我做到了 <div class="text" id="text_swlu3or4flh" contenteditable="true">This is some text</div> 这可能是一个解决方案： #text_swlu3or4flh { display:flex; align-items:center; gap:0.5rem; transition: all .2s ease-out; cursor:pointer; } #text_swlu3or4flh svg { width: 20px; height: 20px; opacity:0; } #text_swlu3or4flh:hover svg { opacity:1; } <div class="text" id="text_swlu3or4flh" contenteditable="true"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="currentColor"><path d="M6.5 0C2.91406 0 0 2.91406 0 6.5V7C0 8.09766 0.902344 9 2 9H2.5C3.33594 9 4 9.66406 4 10.5V11C4 12.0977 4.90234 13 6 13H6.5C10.0859 13 13 10.0859 13 6.5C13 2.91406 10.0859 0 6.5 0ZM6.5 1C9.54297 1 12 3.45703 12 6.5C12 9.54297 9.54297 12 6.5 12H6C5.44141 12 5 11.5586 5 11V10.5C5 9.125 3.875 8 2.5 8H2C1.44141 8 1 7.55859 1 7V6.5C1 3.45703 3.45703 1 6.5 1ZM6 2C5.44922 2 5 2.44922 5 3C5 3.55078 5.44922 4 6 4C6.55078 4 7 3.55078 7 3C7 2.44922 6.55078 2 6 2ZM9 3C8.44922 3 8 3.44922 8 4C8 4.55078 8.44922 5 9 5C9.55078 5 10 4.55078 10 4C10 3.44922 9.55078 3 9 3ZM3 4C2.44922 4 2 4.44922 2 5C2 5.55078 2.44922 6 3 6C3.55078 6 4 5.55078 4 5C4 4.44922 3.55078 4 3 4ZM10 6C9.44922 6 9 6.44922 9 7C9 7.55078 9.44922 8 10 8C10.5508 8 11 7.55078 11 7C11 6.44922 10.5508 6 10 6ZM8 9C7.44922 9 7 9.44922 7 10C7 10.5508 7.44922 11 8 11C8.55078 11 9 10.5508 9 10C9 9.44922 8.55078 9 8 9Z" fill="currentColor"></path></svg> <span>This is some text</span> </div> <div class="text hover:text-left" id="text_swlu3or4flh" contenteditable="true">This is some text</div> 或添加CSS类： .text:hover { text-align: left; } 要在悬停时在 div 的左侧显示 SVG，您可以使用 CSS 定位 SVG 并使用 :hover 伪类显示/隐藏它。这是一个示例 HTML 代码： .container { display: flex; align-items: center; position: relative; padding-left: 25px; /* Add padding to the left to make space for the icon */ } .icon { position: absolute; max-width: 25px; left: 0; visibility: hidden; /* Hide the icon by default */ } .container:hover .icon { visibility: visible; /* Show the icon on hover */ } .content { padding: 10px; } <div class="container"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm0 22.955c-5.846 0-10.573-4.728-10.573-10.573S6.154 1.81 12 1.81s10.573 4.728 10.573 10.573-4.727 10.572-10.573 10.572zm1.79-14.767l-1.79 8.9-2.726-2.174a.75.75 0 0 0-.94.115l-2.43 2.813a.75.75 0 0 0 1.155.959l2.12-2.455 2.54 2.033a.75.75 0 0 0 .94-.116l3.464-4.026a.75.75 0 0 0-1.156-.958z" /> </svg> <div class="content"> <p>This is some content.</p> </div> </div>

javascript html css dom flexbox

回答 3 投票 0

Twitter Automation - Puppeteer - 获取推文的用户句柄 - 如何优化此循环以在每次迭代时有效地检查三个条件？

我正在尝试使用 puppeteer 和 snscrape 获取推文。我希望它如何运作：首先，我使用 snscrape 抓取推文 URL 和用户名，并将它们作为数组存储在 JSON 文件中，例如 ...

javascript loops web-scraping dom puppeteer

回答 0 投票 0

你如何@use css自定义属性？

我正在开发一个具有自定义主题设置的应用程序，允许用户选择一种原色，该应用程序使用该原色生成一组 10 个顺风样式颜色变量。我使用 javascript 生成

javascript css webpack dom sass

回答 0 投票 0

WebdriverIO：在动态加载网页时滚动到页面末尾

我有一个 Google Drive 网页，在向下滚动页面时不断加载新项目，直到加载每个项目。我在 JavaScript 中使用 WebdriverIO(V6)，需要向下滚动到 bo...

javascript dom wdio-v6

回答 0 投票 0

为什么像 if, else ... 这样的元素没有突出显示？

我正在为浏览器中的编辑器编写一个迷你代码。任务：当输入诸如 if, else, for ... 等词时，应突出显示它们。 textarea.addEventListener("输入", function() { // 获取 t...

javascript html css dom

回答 1 投票 0

Pickles 练习 - 使用 DOM 更改文本泡菜

泡菜 <pre><code><!DOCTYPE html> <head> <title>Pickles</title>  <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body>  <h1>Pickles Are <span>Delicious</span></h1> </body> </html> </code></pre> <p>选择当前显示为“Delicious”的元素。</p> <p>使用 JAVASCRIPT 将其文本更改为“恶心”。</p> <pre><code>// YOUR CODE GOES IN HERE: const pickleTaste = document.getElementsByTagName('span').textContent = 'Disgusting'; console.log(pickleTaste); </code></pre> <p>我尝试使用 innerText、textContent 和 innerHTML，但是解决方案没有通过。</p> </question> <answer tick="true" vote="1"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>// document.getElementsByTagName() returns an array, not a singular node var PickleTaste = document.getElementsByTagName("span"); PickleTaste[0].textContent = "Disgusting"; console.log(PickleTaste);</code></pre> <pre><code><!DOCTYPE html> <html> <head> <title>Pickles</title>  <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body>  <h1>Pickles Are <span>Delicious</span></h1> </body> </html></code></pre> </div> </div> <p></p> <p>无法证明我没有抄袭 Anil kumar</p> </answer> </body></html>

javascript html dom

回答 0 投票 0

document.body.classList.add/remove 没有按预期工作

document.body.classList.add/remove 没有按预期工作当我调用 add() 时，它只将 class 属性添加到 body 元素，但没有为其附加任何值。同时，如果我手动...

javascript reactjs dom document-body

回答 1 投票 0

使用 JS 在 html 上制作自动标题

代码使第一步：添加带有主页链接的图像和带有文档名称的 h1（如果还没有 h1）我使用了一个引用中的 js 文件的 html，并为

javascript html dom

回答 0 投票 0

有没有更好的DOM抓词方法

现在，我正在开发一个简单的 chrome 扩展。在这个阶段，我试图：基本上获取 DOM 上的所有单个单词（以数组形式返回）随机选择其中的 10 个。切...