javascript - How to apply CSS directly to DOM TextNodes?

Question

How can I assign text-align:center property to TextNode created thro' DOM node. I added this TextNode directly to body(without using any <div> components).

 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

您不能将 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");

Answer 4

只需将 Same textAlign 属性赋予包含文本节点的元素即可。您不能将样式应用于文本节点。您可以将样式应用于包裹在 Text-Node 周围的元素，因此 CSS 样式将应用于该包裹器内的所有内容。