單擊錨點時如何更改元素的樣式

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

您可以嘗試如下操作：

Java腳本

 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>