インラインスタイルを追加するjQuery/JavaScriptトグルボタン

Question

インラインスタイルを追加するトグルボタンの作成方法は？私はクラス名または（のみ.SHOWを使用してを追加したくない私はdivの を表示または非表示にするトグルボタンを作成したい、このシンプルな構造では例えば

）と.hide（私はそれが

style="display:block color:red;" 

、あなたトン場合は、このスタイルを追加したいボタンを切り替えた場合、私はそれは例えば、インラインスタイルである必要はjQueryの

中） oggle再び

style="display:none" 

<button>toggle</button> 
 

 
<div>blah bla blah</div>

Answer 1

あなたは.css("display")あなたが

$("button").click(function(){ 
     if($("div").css("display") == "none") { 
      $("div").css({"display":"block","color":"red"}); 
     } 
     else{ 
      $('div').css("display","none"); 
     } 
    }); 

をやってみたかったよう.Then属性を設定してトグルのスタイルを確認することができます

Answer 2

使用カスタムクラスとコードの下toggleClass()

.costomclass { 
    display:block color:red; 
} 
.normalClass { 
    display:none 
} 

<div class="normalClass">blah bla blah</div> 

$(function(){ 
    $('button').click(function(){ 
    $('.normalClass').toggleClass('costomclass'); 
    }); 

}); 

Answer 3

試して...

<button id="button">toggle</button> 

<div id="div">blah bla blah</div> 

JavaScri PTコード...

var button=document.getElementById("button"); 
var div=document.getElementById("div"); 
div.style.display="block"; 

button.onclick=function(){ 
    if(div.style.display=="block"){ 
     div.style.display="none"; 
    } 
    else{ 
     div.style.display="block"; 
    } 
} 

ライブdemo here

コーディングハッピー... :)