用于添加内联样式的 jQuery/JavaScript 切换按钮

Question

How to create a toggle button to add inline styles?

For example in this simple structure i want to make a toggle button to show or hide the div I do not want to add a class name or using only .show() and .hide() in jQuery

I need it to be Inline style for example If i toggle the button i want it to add this style

style="display:block color:red;"

and if you toggle again

style="display:none"

 <button>toggle</button> <div>blah bla blah</div>

Answer 1

try below code...

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

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

JavaScript code...

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

live demo here

Happy coding... :)

Answer 2

You can check toggle style with .css("display") .Then set attribute as you wanted to do

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

Answer 3

Use custom classes and toggleClass()

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

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

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

});

Answer 4

simplified toggle version

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

snippet

 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>