dom 相关问题

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

当子类处于活动状态时，在页面加载时打开可折叠的父类

我有一个 html 页面，其中包含带有按钮 btn-acc-tab 的手风琴部分。当用户单击按钮时，acc-tab 部分会打开，每个部分都包含可以处于活动状态的链接 tab-link。该教派...

html jquery dom dynamic parent-child

回答 1 投票 0

React 状态更改后 DOM 中的元素未更新

我有一个名为 dataTable 的反应变量，使用 useState() 进行管理，它包含一个表元素，作为 {dataTable} 嵌入在我网站的 HTML 中。然而，当我用 setDataTable() 更新它时，它的价值......

javascript reactjs dom react-hooks

回答 1 投票 0

能够在 javascript 中访问 dom 元素，而无需为其显式定义查询选择器

在我的代码中，我正在制作一个简单的库应用程序，并且由于某种原因，在我的javaScript代码中，未经检查，我假设我已经通过 ch 的 read 变量名定义了一个查询选择器...

javascript html dom javascript-objects

回答 1 投票 0

触发 React 渲染输入的更改事件（类型=范围）

“反应”：“^15.4.2” 我无法从 jquery 触发使用 React 渲染的输入的更改事件。我需要这样做来进行一些端到端测试。这是一个沙盒作为完整的展示：

javascript jquery reactjs dom dom-events

回答 1 投票 0

扩展html表单元素

第一次尝试扩展特定的 html 元素，在我的例子中是一个表单。我对源自 HTMLElement 的“普通”自定义元素/Web 组件有一些经验。 ...的基本代码

javascript html dom custom-element

回答 1 投票 0

禁用Javascript中的dom更改事件？

我用 document.addEventListener("DOMSubtreeModified", function() {} 每当文档的 DOM 更改时就采取行动。问题是：在该函数中我自己修改了 DOM，但我没有......

javascript jquery events dom

回答 1 投票 0

.off("DOMSubtreeModified") 的问题

我有这样的逻辑： $('.myElement').on('DOMSubtreeModified', function() { 如果（某事==真）{ $('.myElement').off('DOMSubtreeModified'); // 执行一些代码 } }); 威尔...

javascript jquery dom

回答 1 投票 0

为什么我的对象数组无法从 JavaScript 正确显示为 HTML？

常量初始 = [ { 姓名：“爱丽丝”，价格：30，职业：“作家”}， {姓名：“鲍勃”，价格：50，职业：“老师”} ] 常量额外自由职业者 = [ { 名称：“切片博士”，价格：25，

javascript html arrays object dom

回答 1 投票 0

如何通过onsubmit起作用的函数来显示dom元素？

我正在使用 Javascript 和 CSS 制作带有用户输入的贺卡。我需要能够将用户在表单中提交的信息填充为下面的卡片。我有一些 CSS 分配...

javascript html css dom

回答 1 投票 0

svelte 创建组件并将其作为 html 元素传递

我正在使用一个库，它要求我创建一个 html 元素并传递该元素。然后库将元素放在内部正确的位置。我面临的问题是元素 i

javascript html dom svelte svelte-component

回答 1 投票 0

动态设置选择元素宽度等于其选项的内容宽度

我试图使选择元素的宽度等于其选项文本的角度宽度。我的 HTML 组件看起来就像这样： ... 我试图使选择元素的宽度等于其选项文本的角度宽度。我的 HTML 组件看起来像这样： <form [formGroup]="profileForm"> ... <select (change)="adjustSelectWidth($event.target)" formControlName="members"> <option value="1">Me</option> <option value="2">Me, my spouse</option> <option value="3">Me, my spouse and my kids</option> </select> ... </form> 我尝试过的：使用 clientWidth 获取选项元素宽度，然后将其应用于选择元素，但宽度为 0。 export class AppComponent { profileForm = new FormGroup({ members : new FormControl(''), }) adjustSelectWidth(e){ const optionValue = this.profileForm.get('members').value; const optionWidth = document.querySelector(`option[value="${optionValue}"]`).clientWidth; e.style.width= optionWidth + "px" } } 获取选项的innerHTML长度，然后将其与固定像素相乘，但它不是动态选项 export class AppComponent { profileForm = new FormGroup({ members : new FormControl(''), }) adjustSelectWidth(e){ const optionValue = this.profileForm.get('members').value; const optionTextLength = document.querySelector(`option[value="${optionValue}"]`).innerHTML.length; e.style.width= optionTextLength*8 + "px"; } } 将选项的 innerHTML 附加到跨度元素以测量宽度，但是当我将其应用于选择元素时，该跨度 clientWidth 不准确 export class AppComponent { //This temp is bind to a span via string interpolation {{...}} temp:string; profileForm = new FormGroup({ members : new FormControl(''), }) adjustSelectWidth(e){ const optionValue = this.profileForm.get('members').value; const optionText = document.querySelector(`option[value="${optionValue}"]`).innerHTML; this.temp = optionText; const spanWidth = document.querySelector(`.temp`).clientWidth; e.style.width = spanWidth + "px"; } } 由于我使用 Angular，所以我不喜欢使用 JQuery。另外，为什么clientWidth似乎无法解决我的问题我创建了一个 stackbliz 示例：https://stackblitz.com/edit/angular-bbimkz 有一种方法可以测量文本宽度。我认为它足够可靠，但在性能方面可能有点昂贵，当然取决于您的应用程序。（Stackblitz 中的简单示例没有性能问题。）方法是实际将一个隐藏元素附加到包含要测量的文本的文档中，读取clientWidth，然后立即删除该元素。修改adjustSelectWidth()如下： adjustSelectWidth(e: HTMLSelectElement){ // assuming something is always selected, please test! const displayedText = e.options[e.selectedIndex].innerText; const dummy = document.createElement('div'); dummy.innerText = displayedText; dummy.style.position = 'absolute'; dummy.style.visibility = 'hidden'; document.body.insertBefore(dummy, document.body.firstChild); const measuredWidth = dummy.clientWidth; document.body.removeChild(dummy); e.style.width = (measuredWidth + 30) + 'px' } 修改后的 Stackblitz：https://stackblitz.com/edit/angular-mpjxbd?file=src/app/app.component.ts - 在最新的 Firefox、Chrome、Edge 中测试以防万一有人需要复制粘贴 JS 代码。感谢您的决议 Nikos 很有帮助。 adjustDDLWidth: function (htmlEl) { // Assuming something is always selected, please test! const displayedText = htmlEl.options[htmlEl.selectedIndex].innerText; const dummy = document.createElement('div'); dummy.innerText = displayedText; dummy.style.position = 'absolute'; dummy.style.visibility = 'hidden'; document.body.insertBefore(dummy, document.body.firstChild); htmlEl.style.width = (dummy.clientWidth + 30) + 'px'; document.body.removeChild(dummy); }

javascript css angular typescript dom

回答 0 投票 0

使用单击事件监听器添加和删除类

我正在使用 CSS 制作叠加层，但需要一个 onclick 事件来更改类的内容。我在登录表单下制作了一个注册表单。点击注册后，注册表格类

javascript forms dom overlay onclicklistener

回答 1 投票 0

过滤掉隐藏的元素

如果我单击“仅显示帽子”按钮，它会删除具有“not-a-hat”类的元素，问题是，当我单击另一个过滤器时。

javascript dom

回答 1 投票 0

我怎样才能有一个输入组？

我正在开发一个创建医院软件的项目。我需要创建一个带有矩形的表单来选择一个组，就像设计中一样。我不知道该怎么做。我怎样才能做到这一点，...