part 1
onclick div スタイルが変更され、part 2
もう一度クリックすると通常に戻ります。私はそうしようとしましたが、part 2
結果を達成できませんでした。
以下はJavascriptコードです
function abc() {
document.getElementById("test").style.color="red";
}
テスト div をもう一度クリックすると、色がデフォルトの色、つまり黒に戻るはずです...
part 1
onclick div スタイルが変更され、part 2
もう一度クリックすると通常に戻ります。私はそうしようとしましたが、part 2
結果を達成できませんでした。
以下はJavascriptコードです
function abc() {
document.getElementById("test").style.color="red";
}
テスト div をもう一度クリックすると、色がデフォルトの色、つまり黒に戻るはずです...
function abc() {
var color = document.getElementById("test").style.color;
if (color === "red")
document.getElementById("test").style.color="black";
else
document.getElementById("test").style.color="red";
}
jQueryの使用:
$(document).ready(function(){
$('div').click(function(){
$(this).toggleClass('clicked');
});
});
色をチェックしたり、フラグを立てたりするためのロジックがあります。
function abc() {
var currentColor = document.getElementById("test").style.color;
if(currentColor == 'red'){
document.getElementById("test").style.color="black";
}else{
document.getElementById("test").style.color="red";
}
}
function abc() {
var color = document.getElementById("test").style.color;
color = (color=="red") ? "black" : "red" ;
document.getElementById("test").style.color= color;
}
クリックして変更する前に、色を確認できます。
function abc(){
var color = document.getElementById("test").style.color;
if(color==''){
//change
}else{
//change back
}
}
簡単なswitchステートメントでうまくいくはずです。
function abc() {
var elem=document.getElementById('test'),color;
switch(elem.style.color) {
case('red'):
color='black';
break;
case('black'):
default:
color='red';
}
elem.style.color=color;
}
要素のクラスを変更することをお勧めします(.regularは黒、.alertは赤):
function abc(){
var myDiv = document.getElementById("test");
if (myDiv.className == 'alert') {
myDiv.className = 'regular';
} else {
myDiv.className = 'alert';
}
}