在保持 CSS 的同时更改 innerHTMl

Question

我在div中有一段：

HTML:

<div id="header"><p>Header</p></div>

CSS:

#header p {
color: darkgray;
font-size: 15px;

点击按钮时，内部HTML变化：

Javascript:

var header = document.getElementById('header')
header.innerHTML = "Changed"

但是，改变了内部HTML之后，文本returns又恢复了原来的属性。我希望文本保持其颜色 (darkgray) 和字体大小 (15px)。

这是一个JS Fiddle

Answer 1

它不起作用，因为您随后要删除嵌套的 p 元素（这是应用 CSS 的元素）。

您可以 select 第一个子节点然后更改 textContent property:

var header = document.getElementById('header');
header.childNodes[0].textContent = "Changed";

访问 childNodes 属性的好处是它将 select 一个子元素或一个文本节点。这意味着即使 #header 元素不包含后代 p 元素，文本也会更改。

换句话说，它将替换 <div id="header"><p>Header</p></div> 和 <div id="header">Header</div> 中的文本。

Changing innerHTMl while keeping CSS