javascript 相关问题

对于以下代码： const allDropdowns = document.querySelectorAll(".main-nav__dropdown"); window.addEventListener("点击", (e) => { [...allDropdowns].forEach((dropdown) => (dropdown.

javascript html dropdown html-tag-details

回答 2 投票 0

如何在 Node.js 中高效处理大型 JSON 数据而不耗尽内存？

我的团队正在使用 Node.js 构建一个 API，用于处理大型 JSON 文件（最多 500MB）。我们尝试使用 JSON.parse 解析这些文件，但应用程序内存不足，然后崩溃。目前...

javascript node.js json memory-management file-processing

回答 1 投票 0

如何确定pdf-lib中自动换行文本的高度？

在 pdf-lib 中，可以使用此处概述的技术自动换行文本：https://stackoverflow.com/a/77436904/1766230 从 'pdf-lib' 导入 { PDFDocument, StandardFonts }; 常量文档 = 等待

javascript pdf pdf-generation pdf-lib.js

回答 1 投票 0

使用Leaflet瓦片调用TomTom自定义地图样式

我正在使用带有来自 TomTom 的图块布局的传单地图，并使用此网址 https://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?tileSize=512&view=Unified&language=NGT&key=? 还有他...

javascript leaflet tomtom

回答 1 投票 0

迭代对象的所有子对象和子对象

我有一个包含子对象的对象，甚至还有曾孙对象。我目前正在使用 for (const [key, value] of Object.entries(myObj)) { console.log(`${key}: ${value}`); } 哪个项目...

javascript object parent-child

回答 2 投票 0

触发 DOMContentLoaded 后是否应用样式？标题

考虑以下 HTML 文档：标题 <question vote="5"> <p>考虑以下 HTML 文档：</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body { background: crimson; } div { transition: opacity 5s; font-size: 4em; opacity: 0; } .loaded div { opacity: 1; } </style> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { document.getElementById('body').className += "loaded"; }) </script> </head> <body id="body"> <div> TEST </div> </body> </html> </code></pre> <p>div 的不透明度应设置为 0，并且不透明度的过渡时间为 5 秒。</p> <p>加载 DOM 时，主体会被赋予一个将 div 不透明度设置为 1 的类。</p> <p>我预计 div 不透明度会在 5 秒内从 0 转变为 1。但由于某种原因，它立即发生。</p> <p>如果我使用 setTimemout，每个都会按预期工作：</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body { background: crimson; } div { transition: opacity 5s; font-size: 4em; opacity: 0; } .loaded div { opacity: 1; } </style> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.getElementById('body').className += "loaded"; }, 0); }) </script> </head> <body id="body"> <div> TEST </div> </body> </html> </code></pre> <p>让我想知道样式是在触发 DOMContentLoaded 事件后加载的。这是正常行为还是我在这里做错了什么？</p> </question> <answer tick="false" vote="6"> <p>来自 <a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded" rel="noreferrer">Mozilla 文档：</a> </p> <blockquote> <p>当初始 HTML 文档完全加载和解析后，会触发 <strong>DOMContentLoaded</strong> 事件，而无需等待样式表、图像和子框架完成加载。 </p> </blockquote> <p>文档建议您应该使用加载事件：</p> <blockquote> <p>一个非常不同的事件 <strong>load</strong> 应该仅用于检测完全加载的页面。 </p> </blockquote> <p>所以你会这样做：</p> <pre><code>window.addEventListener('load', function() { document.getElementById('body').className += "loaded"; }); </code></pre> <p>请注意，我不仅更改了事件名称，还更改了分配侦听器的对象。</p> </answer> <answer tick="true" vote="5"> <p><strong>简短版：</strong></p> <p>您正在进入未明确行为的领域。我建议您使用 <pre><code>load</code></pre> 事件来触发转换。</p> <p><strong>长版：</strong></p> <p>当元素 CSS 属性的<em>计算值</em>发生变化（<a href="https://drafts.csswg.org/css-transitions/#ref-for-style-change-event%E2%91%A1" rel="noreferrer">spec</a>）时，会触发 CSS 转换，因此在样式系统首先计算文档的样式之前<strong>不能</strong>触发。</p> <p>样式系统应该在加载相关样式表后对文档进行初始<em>styling</em>传递（即第一次计算计算值）——否则在样式表加载完成后将不得不重新执行工作。 </p> <p>另一方面，<a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded" rel="noreferrer"><pre><code>DOMContentLoaded</code></pre></a>的想法是在解析 HTML 源代码后立即触发 - 无需等待任何其他资源（包括样式表）完成加载，因此它<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=804148#c6" rel="noreferrer">自然可以在任何样式之前触发被计算了</a>。</p> <p>浏览器具有<a href="https://molily.de/domcontentloaded/" rel="noreferrer">复杂的启发式</a>，它会阻止内联脚本的执行（从而阻止解析和 DOMContentLoaded）并确定何时发生初始布局和绘制。脚本可以<a href="https://stackoverflow.com/a/31862081/1026">强制回流/重新样式</a>，因此根据特定的网页代码和时间，样式信息<em>可能</em>在脚本运行时可用。我不确定它是否在所有浏览器中都能可靠地工作，但是从 <pre><code>DOMContentLoaded</code></pre> 强制布局可能会导致您的转换正常工作：</p> <pre><code>div.offsetTop // force layout </code></pre> </answer> <answer tick="false" vote="0"> <p>今天是 2024 年 9 月 16 日。FOUC bug 在 Firefox 130.0 中活跃。我在较大的网站上遇到 FOUC-Bug，而不是在我的客户网站上。由于内容安全策略的限制，不可能对页面内的脚本内容使用技巧。我使用“隐藏”属性和加载事件，如下所示：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><nav hidden class="navbar navbar-expand-lg fixed-top" ></code></pre> </div> </div> <p></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>window.addEventListener("load", () => { const navs = document.getElementsByTagName("NAV") const nl = (navs) ? navs.length : 0 for(let idx = 0; idx < nl; idx++) { navs[idx].removeAttribute("hidden") } });</code></pre> </div> </div> <p></p> </answer> </body></html>

javascript html css

回答 0 投票 0

如何使用 Promise.all 创建任务、稍后执行任务并等待结果

对于下面发布的代码，我收集了数组spromisesTS1和promisesTS2中的Promises。我希望稍后当我调用或执行类似以下内容时执行收集的承诺...

javascript node.js promise

回答 2 投票 0

当我到达另一个端点时，冲突路由器会影响其他端点

当我到达某个端点时，我遇到了有关 Express js 路由的一些问题，例如： http://localhost:3000/api/v1/projects/task/f9488b07-76f8-4f8a-bafb-471f99dde7b8 http://localhost:3000/api/v1/p...

javascript node.js express error-handling prisma

回答 1 投票 0

Javascript：双击时 window.getSelection 不正确

我希望当用户单击网页上的任何单词时打开字典。到目前为止它有效：让 str = window.getSelection().toString(); window.open("https://en.thefreedictionary.com/" + str, &

javascript

回答 1 投票 0

如何收集所有 Promise 并稍后使用 Promise.all 执行它们

对于下面发布的代码，我收集了数组spromisesTS1和promisesTS2中的Promises。我希望稍后当我调用或执行类似以下内容时执行收集的承诺...

javascript node.js promise

回答 1 投票 0

根据项目分配列表和已知产能高效计算可用日期

我正在寻找一种有效的方法来计算团队中每个成员在给定一组项目任务的情况下可用的日期。有 25 名团队成员，每个人都有一套能力和任务。