dom 相关问题

我在html文件中使用vue3，因为我被告知要做的事情......而这正在发生我在 html 文件中使用 vue3，因为我被告知要做的事情......而这正在发生 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id = "app"> <div id="here"></div> </div> </body> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const { createApp } = Vue const x = document.getElementById('here') console.log('outside', x) createApp({ setup(){ const x = document.getElementById('here') console.log('inside', x) } }).mount('#app') </script> </html> 结果是这样的。 outside <div ...> inside null 您能给我解释一下吗？我试图查找文档，但不知道如何使用正确的关键字查找。也许 createApp 创建了与父级不同的上下文，所以我无法在其中引用它？ +）我测试了vue3部分，它工作正常。我可以在html部分引用setup函数返回的数据。设置发生在vue组件创建之前，可以参考下面的代码。 setup(){ Vue.onMounted(function() { const x = document.getElementById('here') console.log('inside', x) }) }

dom vuejs3

回答 1 投票 0

为什么当我使用 dom 更改 href 属性时，我的锚标记的内容会被删除？

当我尝试使用 DOM 更改 href 属性时，锚标记内的按钮和 div 被删除。这是代码” 当我尝试使用 DOM 更改 href 属性时，锚标记内的按钮和 div 被删除。这是代码” <div class="flex experience flex-col mx-12 mt-8 xl:mx-auto 2xl:mx-auto text-center items-center"> <img src="portfolio.png" alt="" class="laptopImg"> <h1 class="text-2xl text-white font-inter font-light title mt-5 projectTitle">My Portfolio</h1> <h2 class="text-base text-blue-400 font-inter font-light mt-4 location projectTech">Tech: Html, Css, Tailwindcss, Javacript</h2> <a href="https://github.com/haroon6268/Portfolio" class="projectLink"> <div class="bg-gradient-to-r from-purple-500 via-blue-400 to-pink-500 p-1 rounded-md w-44 hover:opacity-50 transition-all ease-in-out duration-200 cursor-pointer mt-5"> <div class="h-full w-full bg-black flex flex-row justify-center items-center space-x-2"> <button class="text-gray-400 font-light text-base font-inter py-2">Github</button> </div> </div> </a> </div> 这是Javascript const changeProject = function(img, title, tech, link) { laptopImg.src = img; projectLink.innerHTML = title; projectTech.innerHTML = tech; projectLink.setAttribute("href", link); } const showGuessANumber = function(){ changeProject("guessANumber.png", "Guess a Number", "Tech: HTML, CSS, Javascript, Tailwindcss", "") } guessANumber.addEventListener('click', showGuessANumber); 有人知道为什么会发生这种情况吗？我尝试仅更改 href 属性，尽管一旦单击guessANumber 按钮，href 属性内的所有内容都会被删除。其他一切都很好。我用projectLink代替projectTitle

javascript html css dom

回答 1 投票 0

在querySelector中：如何获取第一个和最后一个元素？ dom 中使用什么遍历顺序？

在 div 中，包含带有属性 move_id 的元素（不一定是第二代）。首先，想要获取集合的第一个和最后一个元素的最直接方法尝试通过以下方式获取第一个和最后一个：变种

javascript dom html

回答 7 投票 0

如何找到元素的第一个隐藏父元素并使其可见

我想找到一个元素的第一个隐藏父元素以使其可见。我尝试了这个但没有成功： $('input[name="toto"]').parents(":hidden:first").show(); 怎么会...

javascript jquery dom

回答 1 投票 0

如何知道通过 style 属性设置的 CSS 何时应用于 DOM？

简单的问题，是否有一个事件或回调表明通过 JS“style”属性设置的 CSS 已应用并渲染到 DOM。这是一个例子。 const elem = 文档。

javascript css dom

回答 1 投票 0

交换两个 html 元素并在它们上保留事件侦听器

有类似的问题，但所有答案都是仅将html元素交换为里面的内容。我需要交换两个 div，其中有很多内容（表格、选择框、输入等...

javascript jquery dom dom-events

回答 8 投票 0

使用 javascript 切换“隐藏”属性

我想根据值显示和隐藏元素。我找到了一种方法来做到这一点，但我认为为了一个简单的目的而编写了这么多代码。什么是更好的方法？这是... 我想根据值显示和隐藏元素。我找到了一种方法来做到这一点，但我认为为了一个简单的目的而编写了这么多代码。有什么更好的方法吗？这是我在没有使用任何框架的情况下编写的代码： <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" hidden> <script> let menu = document.getElementById("rank_current") let value = menu.value menu.addEventListener('change',function(){ value = menu.value for (i = 0; i < menu.childElementCount; i++) { if (menu.options[i].classList.contains("select-mythic") && menu.options[i].value == value) { document.getElementById("target").removeAttribute("hidden") } } }); </script> 您无需遍历选项并检查特定的类。您可以尝试以下方法： <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" style="display: none;"> <script> let menu = document.getElementById("rank_current"); let target = document.getElementById("target"); menu.addEventListener('change', function () { if (menu.value === "mythic" || menu.value === "mythical_honor") { target.style.display = "inline-block"; } else { target.style.display = "none"; } }); </script> 您走在正确的道路上。您可以使用 selectedIndex 属性。这是文档。现在，当菜单检测到更改时，您可以获取所选项目并检查它是否包含类 select-mythic，如果包含，则从输入中删除隐藏属性。 <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" hidden> <script> const menu = document.getElementById("rank_current"); menu.addEventListener('change',function() { const selectedOption = menu.selectedIndex; if (menu.selectedIndex.classList.contains('select-mythic')) { document.getElementById("target").removeAttribute("hidden"); } } </script> 您可以显着缩短代码： document.getElementById("rank_current").addEventListener('change', ({target}) => document.getElementById("target").hidden = target.value.startsWith('mythic') ); <select id="rank_current"> <option value="select">--Select Rank--</option> <option value="grandmaster">Grandmaster</option> <option value="epic">Epic</option> <option value="legend">Legend</option> <option class="select-mythic" value="mythic">Mythic</option> <option class="select-mythic" value="mythical_honor">Mythical Honor</option> </select> <input id="target" type="number" min="0" placeholder="Stars" hidden>

javascript html dom

回答 0 投票 0

确定哪个 DOM 元素导致父元素的尺寸增加

有时，当网站未包含在移动视口内时，我会遇到此问题，我需要确定是什么导致宽度超出。通常我通过隐藏的尝试和错误来做到这一点

html css dom google-chrome-devtools firefox-developer-tools

回答 1 投票 0

如何更改特定文件的 TSConfig lib 或不使 lib 类型全局化

我正在使用react-native和react-native-web，并且使用html DOM元素而不是react本机组件编写了一些代码（而不是）。为了正确输入它们，我... 我正在使用 react-native 和 react-native-web，并使用 html DOM 元素而不是 React Native 组件编写一些代码（<div/> 而不是 <View/>）。为了正确输入它们，我将 'DOM' 添加到 tsconfig.compilerOptions.lib： "compilerOptions": { ... "lib": [ "ES6", "ES2021.String", "DOM" // <--- ], ... } 但是，我有很多全局类型可能会破坏我的代码并导致崩溃，例如 Image 可以在不从 react-native 导入的情况下使用： const SomeFC = () => { // no error here because Image type is global in DOM // but got crash in runtime return <Image /> } 我想覆盖特定文件的库设置，如下所示： // Here is the beginning for some file: // @ts-config lib: ['DOM'] 或者找到一种从全局中删除 DOM 类型并在必要时导入它们的方法： import {Image, HTMLDivElement} from 'html-dom' 或者至少选择我需要的全局类型，或者删除我不需要的全局类型。你找到解决办法了吗？我找了很久但是好像没有答案。

reactjs typescript dom tsconfig react-native-web

回答 1 投票 0

有没有办法阻止shadow dom内的javascript访问其外部的DOM？

所以如果我有： js可以改变component_test_div中的文本我可以阻止吗？

javascript dom shadow-dom

回答 2 投票 0

如何避免javascript中的nan错误？

我需要从一个数字（例如1000）中减去几个容器的高度，同时这个数字必须是一个css值（在本例中为1000px）。但是当我添加

javascript html dom

回答 1 投票 0

dom 相关问题

最新问题