JSで背景色を切り替えようとしています

JavaScriptを使い慣れていないので、要素の背景色を変更するためのボタンを取得しようとしています。私はいくつかの異なるソースからjsを組み合わせましたが、うまくいかず、理由がわかりません。JSで背景色を切り替えようとしています


 
    
 
function myFunc() { 
 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
 
    if (y === "normal") { 
 
    y = "active"; 
 
    } else { 
 
    y = "normal"; 
 
    } 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<body> 
 
    <button onclick="myFunc()">click here</button> 
 
    <div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
    </div> 
 
</body>

出典

2017-11-02 MightyCactus

最後に値を割り当てる必要があります。値が不足しているだけです。機能の最後にdocument.getElementById("bg-change1").setAttribute("class",y);が足りないだけです。

function myFunc() { 
 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
 
    if (y === "normal") { 
 
    y = "active"; 
 
    } else { 
 
    y = "normal"; 
 
    } 
 
    document.getElementById("bg-change1").setAttribute("class",y); 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<body> 
 
    <button onclick="myFunc()">click here</button> 
 
    <div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
    </div> 
 
</body>

出典

2017-11-02 18:15:07

あなたはそれを純粋なJavaScriptを使用して、短い形式の操作を行うことができます

function myFunc() { 
    var y = document.getElementById("bg-change1"); 
    y.classList.toggle("active") 
}

しかし、それは.active "クラスを与えるために必須に必要な現在のCSSセレクタの順序を気にしておきます'.normal'よりも優先されます。

出典

2017-11-02 18:13:59 Hanif

多分それは彼を表示するために、完全なコードを追加する方が良いでしょう。） –

彼のコードは何も基づいていない私の機能に従っている場合変更する必要があります完璧に働くには十分です。 – Hanif

私は知っているが、それは単にあなたにもっと完全に答えさせるだろう –

getAttribute("class")あなたはそれを呼び出す瞬間に、属性の内容を返します。これは文字列なので、要素への参照はありません。したがって、再割り当てyは何もしません。

は実際にあなたがsetAttribute("class", "active")を使用することができ、属性を変更します。しかし、これは良い解決策ではありません。なぜなら、複数のクラスを持つことができず、normalクラスは不要です。

異なるセレクタ（たとえば#bg-change1）を使用してデフォルトのスタイルを適用し、.activeセレクタで変更するプロパティを上書きするだけです。 document.getElementById("bg-change1").classList.toggle("active")を使用して両方の「モード」を切り替えることができます。

出典

2017-11-02 18:15:45

-1

属性は正常に取得されましたが、変更や設定はできません。ことは、document.getElementById("bg-change1").setAttribute("class", y);

例でください：

function myFunc() { 
 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
 
    if (y === "normal") { 
 
    y = "active"; 
 
    } else { 
 
    y = "normal"; 
 
    } 
 
    document.getElementById("bg-change1").setAttribute("class", y); 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<button onclick="myFunc()">click here</button> 
 
<div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
</div>

出典

2017-11-02 18:17:01 j08691

匿名の臆病者downvoterはコメントするには？私たちに一向に恩恵をもたらし、ペアを成長させ、この答えが間違っていることを説明してください。 – j08691

ここでは、yと変化するクラス名でクラスを取得しているが、それはバックの要素に設定さdoesntの。

代わりに、あなたは、クラスを追加および削除する方法言い逃れのビットです

function myFunc() { 
    var y = document.getElementById("bg-change1").getAttribute("class"); 
    if (y === "normal") { 
    document.getElementById("bg-change1").classList.remove('normal'); 
    document.getElementById("bg-change1").classList.add('active'); 
    } else { 
    document.getElementById("bg-change1").classList.remove('active'); 
    document.getElementById("bg-change1").classList.add('normal'); 
    } 
}

出典

2017-11-02 18:18:22

短い形式の場合、Hanifの答えを.toggle関数で使用することができます –

を使用することができます。私はトグルクラスのメソッドを実装することをお勧め、以下を参照：


 
    
 
function myFunc() { 
 
    var y = document.getElementById("bg-change1"); 
 
    y.classList.toggle("active"); 
 
}

.normal { 
 
    background-color: white; 
 
} 
 

 
.active { 
 
    background-color: green; 
 
}

<body> 
 
    <button onclick="myFunc()">click here</button> 
 
    <div id="bg-change1" class="normal"> 
 
    <p>Lorem ipsum and etc</p> 
 
    </div> 
 
</body>

が

出典

2017-11-02 18:26:44 kawnah

JSで背景色を切り替えようとしています

答えて

関連する問題