如何直接将CSS应用于DOM TextNodes？

Question

如何将text-align:center属性分配给TextNode创建的thro'DOM节点。我已将此TextNode直接添加到body（不使用任何<div>组件）。

 var Text = document.createTextNode("Welcome");
 Text.style.text-align = 'center';

Answer 1

你做不到。 CSS仅适用于元素，而不适用于文本节点。

您需要将文本节点包装在元素中，或直接使用元素：

var text = document.createElement("p");
text.textContent = "Welcome";
text.style.textAlign = "center";

...尽管你也可以使用标题元素。

Answer 2

在JavaScript中，CSS样式转换为驼峰套管。像这样......

Text.style.textAlign = 'center';

所以，

text-align变为textAlign，background-color变为backgroundColor，依此类推......

Answer 3

只需将相同的textAlign属性赋予文本节点所在的元素。 您不能将样式应用于文本节点。您可以将样式应用于围绕Text-Node的元素，从而将CSS样式应用于该包装器内的所有内容。

Answer 4

您无法将CSS应用于文本节点。因此，最好在

元素中创建文本。 你可以通过两个jQuery函数来完成它。

使用.css()

var Text = $("<p>welcome</p>").css("textAlign","center");

使用.addClass()

首先在你的css中写一个将在cls类中应用的样式，

.cls {text-align: center}

然后将此类添加到脚本中新创建的元素

var Text = $("<p>Welcome</p>").addClass("cls");