CODEWITHSUNDEEP
javascripthtmlcss
user3629541
user3629541

Reputation:

how to change style of element when click on anchor

This is my anchor:

<a href="javascript:fnSelect(\\\'id\\\');" class="selectable">[Select All Code]</a>

When clicking on this anchor, this css style

ol.linenums li {
list-style: decimal;
}

should be changed to this ( or overwrite):

ol.linenums li {
list-style: none !important;
}

How can i achieve this?

Update:

This is my html structure:

<a href="javascript:fnSelect(\\\'id\\\');" class="selectable">[Select All Code]</a>

<ol>
<li class="L0">one</li>
<li class="L1">one</li>
<li class="L2">one</li>
</ol>

so the list tags inside the ol should be changed from style

Upvotes: 0

Views: 638

Answers (2)

Rajesh
Rajesh

Reputation: 24915

You can try something like this:

Javascript

function updateCSS() {
  var ol = document.getElementsByClassName("olList")[0];

  for (var c = 0; c < ol.classList.length; c++) {
    if (ol.classList[c] == "one") {
      ol.className = ol.className.replace("one", "two");
    } else if (ol.classList[c] == "two") {
      ol.className = ol.className.replace("two", "one");
    }
  }
}
.one {
  font-size: 12px;
  list-style: none!important;
}
.two {
  font-size: 16px;
  list-style: decimal;
}
<a href="#" onclick="updateCSS()" class="one">Click Me</a>

<ol class="olList two">
  <li class="L0">one</li>
  <li class="L1">one</li>
  <li class="L2">one</li>
</ol>

jQuery

function updateCSS() {
  $(".olList").toggleClass("two one")
}
.one {
  font-size: 12px;
  list-style: none!important;
}
.two {
  font-size: 16px;
  list-style: decimal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" onclick="updateCSS()" class="one">Click Me</a>

<ol class="olList two">
  <li class="L0">one</li>
  <li class="L1">one</li>
  <li class="L2">one</li>
</ol>

Upvotes: 1

Armen
Armen

Reputation: 4202

create .list_style_none css rule 

.list_style_none {
   list-style: none !important;
}

and append it to your li with js, it will overwrite initial ol.linenums li rule

Upvotes: 1

Related Questions