Question

我知道如何使用JavaScript将锚元素添加到我的页面，例如

var userName_a = document.createElement('a');

但是，现在我想在该元素上添加一个样式名称，例如我试过

var userName_a = document.createElement('a class="normalLink"');

哪个不起作用，导致我的JavaScript停止运行。

在使用JavaScript创建的元素中添加样式名称的最佳方法是什么？

Answer 1

像这样

var userName_a = document.createElement('a');
document.body.appendChild(userName_a);
userName_a.innerHTML='HELLO WORLD';
userName_a.style='color:red;background:yellow'

Answer 2

createElement函数仅使用您要创建的HTML标记的名称，而不是其他内容。

您可以使用style property或通过className或classList list

添加/删除样式类来访问元素的样式

样式属性

userName_a.style.background = "#FF0000";
userName_a.style["font-size"] = "20px";

的className

userName_a.className = "active";

班级列表

userName_a.classList.add("active");
userName_a.classList.remove("active");
userName_a.classList.toggle("active");

Answer 3

最一致的方法是使用setAttribute函数：

var userName_a = document.createElement('a');
userName_a.setAttribute( 'class', 'normalLink' );
userName_a.setAttribute( 'style', 'color:blue;font-weight:bold;' );

Answer 4

由于看起来你只想在对象上有一个类名，最简单的方法是在创建对象后为其分配一个类名：

var userName_a = document.createElement('a');
userName_a.className = "normalLink";

您也可以直接修改样式属性：

userName_a.style.color = "red";
userName_a.style.textDecoration = "none";

如何使用JavaScript将样式类名称添加到我的锚元素中

4 个答案: