用createElement創建一個按鈕，然後更改它的顏色

Question

我有一些腳本可以創建一個按鈕，供用戶在達到某些條件後推送。這一切都很好，但創建的按鈕只是默認的樣式，我想改變按鈕的屬性。這是我的：

<script> 
function myFunction() { 
var btn = document.createElement("BUTTON"); 
document.body.appendChild(btn); 
} 
</script> 

我猜我需要使用setAttribute某處來改變屬性，但我不知道如何設置它。

Answer 1

你可以只用 「風格」 字段創建的元素，像這樣：

btn.style.color = "#fff"; 
btn.style.background = "#000"; 

Answer 2

您可以設置樣式像

function myFunction() { 
    var btn = document.createElement("BUTTON"); 
    btn.style.color = 'red'; 
    document.body.appendChild(btn); 
    } 

Answer 3

可以使用的setAttribute：

var btn = document.createElement("button"); 
btn.setAttribute('style', 'background-color: black'); 

Answer 4

你可以像這樣設置一個類：

btn.classList.add('newClass'); 

然後在CSS，添加您的風格：

.newClass 
{ 
    color:red; 
} 

或者，你可以做到這一切在JavaScript（不可取）：

btn.style.color = 'red'; 

Answer 5

你應該一類添加到您的按鈕，然後在CSS中綁定你的樣式。 這是一個簡單而且可以在你的JS代碼中操作樣式但是它被認爲是不好的做法。

添加類的元素：

btn.className = "MyClass"; (for only 1 class) 
btn.classList.add("MyClass") (if you already might have classes, seeing that you just created the element in line before) 

插入這一點，你的元素追加到身體前

然後在鏈接CSS文件中添加此：

.MyClass{ 
    background:red; 
} 

如果您堅持做JS中的一切你可以用：

btn.setAttribute('style', 'background: red'); 

而不是。類名和跳過CSS文件

Answer 6

創建您希望該按鈕的樣式CSS類，以便然後：

btn.className = "myClass"; 

如果你不希望創建一個CSS類，那麼你也可以做以下內容：

btn.style.color = "pink"; 
btn.style.backgroundColor = "yellow"; 

的 「顏色」 屬性只更改文本的顏色， 「的backgroundColor」 改變其背景

Answer 7

function myFunction() { 
 
    var btn = document.createElement("BUTTON"); 
 
    var y = document.createTextNode("Button TEXT"); 
 

 
    btn.style.color = '#fff'; 
 
    btn.style.background = "#F00"; 
 
    
 
    btn.appendChild(y); 
 
    document.body.appendChild(btn); 
 
} 
 
myFunction();

Answer 8

你可以定義你的css並添加按鈕。

.btn{ 
 
    color:#fff; 
 
    background:blue; 
 
}

Adding dynamic elements 
 
<button type="button" onclick="add();"> 
 
Add 
 
</button> 
 

 
<script> 
 
\t function add(){ 
 
    var btn = document.createElement("button"); 
 
    document.body.appendChild(btn); 
 
    btn.innerHTML = "new button"; 
 
    btn.className = "btn"; 
 
    } 
 
</script>