jQuery/JavaScript切换按钮以添加内联样式

Question

如何创建一个切换按钮来添加内联样式？

例如，在这个简单的结构中，我想设置一个切换按钮来显示或隐藏我不想添加类名的div，或者只使用.show()和.hide() in jQuery

我需要它是内联样式，例如，如果我切换按钮，我想让它添加这个样式。

style="display:block color:red;"

如果你再切换一次

style="display:none"

​

<button>toggle</button>

<div>blah bla blah</div>

​

Answer 1

试试下面的代码..。

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

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

JavaScript代码..。

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";
    }
}

活这里的演示

快乐的编码..。:)

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

简化切换版本

div.style.display=div.style.display==='none'?'block':'none';

片段

​

var button=document.getElementById("button");
var div=document.getElementById("div"); 
  button.onclick=function (){
div.style.display=div.style.display==='none'?'block':'none';<-----single line

}

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

​