折りたたみ可能な色の変更をマテリアライズ

Question

折りたたみ可能なヘッダーの色をクリックしたときに変更したいと思います。

<div class="collapsible-header" onclick="connect()"></div> 

私はクラス要素内の色を追加する必要があり、私は本当に私は目的球を「接続」を呼び出すときに何かを追加する方法がわかりません。これは可能ですか？

ありがとうございました！

以下と試みたが、

HTML

<div class="collapsible-header" onclick="connect(this)">Robot</div> 

そしてJS

に

function connect(element) 
{ 
    element.style.color = 'red'; 
    if (connection_status == 0) 
    { 
     client.connect(options); 
    }; 
} 

Answer 1

https://jsbin.com/sojefubudo/edit?html,js,console,output

<div class="collapsible-header" onclick="connect(this)"></div> 

が動作していません0

とJavaScriptで：

function connect(element) { 
    element.style.color = 'red'; 
} 

Answer 2

<div class="collapsible-header" onclick="javascript:this.className += ' additionalClass'"></div> 

Answer 3

新しいクラスを取り、あなたが追加したいスタイルを割り当てるには、この

$(".collapsible-header").click(function(){ 
    $(".collapsible-header").toggleClass("NEWCLASS"); 
}); 

Answer 4

はこのバイオリンの表情を持っていますか：

https://jsfiddle.net/swarn_singh/9a6djpwp/

<div onclick="this.style.color = 'red'"> 
Change color with inline javascript 
</div> 

<div onclick="changeColor(this)"> 
Change color with javascript function 
</div> 

<script> 
    function changeColor(element){ 
     element.style.color = 'blue'; 
    } 
</script> 

Answer 5

より良い結果を得るためにToggleClassを使用

(function(){ 
 
    $("#run").click(()=>{ 
 
     //$(this).css('background','yellow'); 
 
     $("#run").toggleClass('yellow'); 
 
    }); 
 
}());

.yellow { 
 
    background: yellow!important; 
 
} 
 

 
.red { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="run" class="red" style="position:absolute;height:100px;width:10px;"></div>