用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>