如何使用JavaScript在我的錨元素上添加樣式類名稱

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屬性或通過className或classList列表添加/刪除樣式類來訪問元素的樣式

樣式屬性

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

班級名稱

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";

您也可以直接直接修改style屬性：

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