Question

我正在尝试创建文本元素，然后添加CSS属性

我尝试使用下面的代码

function create(text){
  var t = document.createTextNode(text);  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");

我希望创建一个带有白色背景和20px边框半径和4px实心黑色边框的文本

Answer 1

代替文本节点（我认为您不能向其中添加样式），只需使用span

function create(text){
  var t = document.createElement("span");
  t.innerText = text;  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");

Answer 2

您遇到了麻烦，因为文本节点无意设置样式。

您应该改为创建DOM元素。我使用了您的代码并对其进行了更新，以便使用您的CSS创建一个model（我猜是文本节点中最近的元素）：

<p>

Answer 3

您的方向正确。您唯一需要做的就是更改document.createTextNode(text)：

var t = document.createElement('span');
t.innerText = text;
\\...
document.body.appendChild(t);

代码不起作用的原因是，您只能设置HTML标记的样式，并且创建的文本节点仅包含添加的字符串，而没有周围的标记。

例如：

<span>
  hello
</span>

是带有一些文本的标签，而中间的hello文本是TextNode。

希望这很有道理。

参考：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode

创建文本节点并添加CSS

3 个答案: