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?

It's answered here: [How do I add a class to a given element?][1] [1]: http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element — proxysingleton, Feb 17 '15 at 17:41

score 2 · Answer 1 · answered Feb 17 '15 at 18:01

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>

yup it needs to be handled properly or else jquery toggle can be used which does all cross browser handling . @epascarello — invinciblejai, Feb 17 '15 at 18:26

score 1 · Answer 2 · answered Feb 17 '15 at 17:45

1

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

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

answered Feb 17 '15 at 17:45

epascarello

185,306
18
175
214

Note that `classList.toggle` is relatively new, and won't work in older browsers. The browser version matrix at the bottom of the MDN link details which browsers support this. – ajp15243 Feb 17 '15 at 18:04
The `...` makes your comment sound possibly condescending. If that's the case, then I'm simply trying to be helpful. – ajp15243 Feb 17 '15 at 18:18

ByteHamster · Answer 3 · 2015-02-17T18:50:13.633

1

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

edited Feb 17 '15 at 18:50

answered Feb 17 '15 at 17:46

ByteHamster

4,609
9
34
51

1

hopefully the classname is not in another word. – epascarello Feb 17 '15 at 18:10

score 0 · Answer 4 · answered Feb 17 '15 at 17:48

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.

score 0 · Answer 5 · answered Feb 17 '15 at 19:07

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.

score -1 · Answer 6 · edited Feb 17 '15 at 18:19

-1

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

edited Feb 17 '15 at 18:19

pdjota

2,943
2
21
33

answered Feb 17 '15 at 17:48

yarvit0

71
7

but what if my class is like this : tree li a:hover, .tree li a:hover+ul li a , how to put this in removeClass? – Enteee Feb 17 '15 at 17:52
How is this the accepted answer when it dos not even toggle the class? – epascarello Feb 17 '15 at 18:10
the post tittle says: "change style" not toggle it, of course if you want to toggle use toggle. Enteee you can just add a class an put it lower in your css file so the lowers styles will be displayed: – yarvit0 Feb 17 '15 at 18:13
From the question: "*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?*" Sounds like toggle to me. – epascarello Feb 17 '15 at 18:15

How to change css li style with javascript?

6 Answers6