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

あなたはsetAttributeメソッドを使用することができます

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

Answer 3

などのスタイルを設定することができます。

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

Answer 4

クラスを次のように設定できます。

CSSで

btn.classList.add('newClass'); 

そして、あなたのスタイルを追加します。

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