css 通过createElement生成的样式元素

rxztt3cl 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(163)

问题是：点击HTML页面上的按钮后，页面上的html <h5>标记文本发生变化，但<h5>标记文本颜色不会变为蓝色（预期行为，因为点击按钮后CSS样式不会重新加载）。
解决此问题的可能变通方法是什么？

const btn = document.querySelector(".test");
btn.addEventListener("click", () => {
  a1 = document.createElement('h5');
  a1.className = "first";
  a1.textContent = 'Blue updated.';
  document.getElementById('position').innerHTML = a1.innerText;
  //newtext = document.createTextNode('abc');
});

.test {
  color: blue;
}

.first {
  color: blue;
}

<h5 id="position">Text Color to be replaced to blue after hitting Blue button(but not happening)</h5>
<button class="test">Change to blue</button>

在上面，单击按钮并触发操作侦听器后，使用a1 = document.createElement('h5'); a1.className = "first"创建HTML <h5>标记元素代码。显示新文本，但颜色没有更改（变为蓝色）。

css

来源：https://stackoverflow.com/questions/75502224/styles-elements-generated-via-createelement

1条答案

按热度按时间

xqkwcwgp1#

您只插入了textContent，而不是appending整个新的H5元素

const btn = document.querySelector(".test");
const pos = document.querySelector('#position');

btn.addEventListener("click", () => {
  const h5 = document.createElement('h5');
  h5.className = "first";
  h5.textContent = 'Blue updated.';
  
  pos.innerHTML = "";  // Empty
  pos.append(h5);      // Append!
});

.test, .first { color: blue; }

<h5 id="position">Text Color to be replaced to blue after hitting Blue button(but not happening)</h5>
<button class="test">Change to blue</button>

PS：您还可以创建一些漂亮的可重用函数来处理DOM查询和元素创建，使用一种友好的语法：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-02-26

我来回答

css 通过createElement生成的样式元素

1条答案

相关问题

热门标签

最新问答