How to change css li style with javascript?

Question

I have like link like this:

<a href="#" onclick="changeClass()">My Button</a>

and css style:

.tree li a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

And my question is how to change this .tree style to another one? And if i click again the style return to the beginning style?

Answer 1

it can be done in plain javascript as below :

 var id = 'myElementId'; var myClassName = " tree"; var d; function changeClass() { d = document.getElementById(id); if (d.className == ' tree') { d.className = d.className.replace(myClassName, ""); } else { //d=document.getElementById('myElementId'); d.className = d.className.replace(myClassName, ""); // first remove the class name if that already exists d.className = d.className + myClassName; // adding new class name } } 

 .tree { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } 

 <a id="myElementId" href="#" onclick="changeClass()">My Button</a> 

now in jQuery it can be achieved using toggle as below :

 var id = 'myElementId'; var myClassName = " tree"; function changeClass() { $('#' + id).toggleClass(myClassName); } 

 .tree { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="myElementId" href="#" onclick="changeClass()">My Button</a> 

Answer 2

Use classList.toggle("className") to toggle a class.

var div = document.getElementById("myDiv");
div.classList.toggle("myClassToggle");

Answer 3

Use this small javascript function:

 function toggleClass(el, class1, class2) { if(new RegExp("\\\\b"+class1+"\\\\b").test(el.className)) { el.className = el.className.replace(new RegExp("\\\\b"+class1+"\\\\b",'g'),class2); } else { el.className = el.className.replace(new RegExp("\\\\b"+class2+"\\\\b",'g'),class1); } } 

 a { display:block; padding:10px; color:white; } .myclass1 { background:red; } .myclass2 { background: green; } 

 <a href="#" class="myclass1" onclick="toggleClass(this,'myclass1','myclass2')">My Button</a> 

Edit: make sure that the classname is not in another word

Answer 4

A simple way to do this would be create another css class selector and assign to it your desired styles in the css file say .my-tree for example.

.my-tree {
    color: red;
}

Now when your anchor is clicked you can add this css class to your tree element.

var treeEl = document.getElementById("tree"); 

treeEl.className = treeEl.className + " my-tree":

Similarly you can also remove this css class. You can use a variable in your code as a flag and use to add/remove the css class.

A simple way of doing this is to use the toggleClass method of jquery which does this in a seamless manner.

Answer 5

Just going to throw this out there - you can do it in pure CSS:

 [type=checkbox] { display:none; } /* This selects the div tag immediately following the checkbox */ [type=checkbox] + div { background:red; cursor:pointer; } /* The same selector, except this is active when the checkbox is checked */ [type=checkbox]:checked + div { background:blue; color:#fff; } 

 <label> <input type="checkbox"> <div>Change me!</div> </label> 

This breaks a few rules for valid HTML, but if all you need is to toggle something (and not care about validation or quirksmode), this solution is pretty simple. If you do care about validation:

 [type=checkbox] { display:none; } [type=checkbox]:checked + label { background:blue; color:#fff; } [type=checkbox] + label { background:red; display:block; } 

 <input id="toggler" type="checkbox"> <label for="toggler"> Change me! </label> 

Just something to chew on.

Answer 6

You can use jQuery

HTML:

<a href="#" id="myLink">My Button</a>

JS:

   $( "#myLink" ).click(function() {
     $( "#myLink" ).toggleClass("first");
     $( "#myLink" ).toggleClass("second");
  });

CSS:

.first {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}

.second {
    background: #000; color: #fff; border: 1px solid #94a0b4;
}