单击锚点时如何更改元素的样式

Question

这是我的主播：

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

单击此锚点时，此css样式

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

应更改为此（或覆盖）：

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

我怎样才能实现这个目标？

更新

这是我的html结构：

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

所以 ol 中的列表标签应该从样式

更改

Answer 1

创建.list_style_none css规则

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

并使用js将其附加到li，它会覆盖初始ol.linenums li规则

Answer 2

您可以尝试这样的事情：

的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>