使用JavaScript突出顯示文字顏色

Question

 //<![CDATA[ var blinkText = $(".highlight"); var interval = setInterval(function() { blinkText.toggleClass("highlightRed"); }, 500); //]]> 

 .highlight { -webkit-transition: background 1.0s ease-in-out; -ms-transition: background 1.0s ease-in-out; transition: background 1.0s ease-in-out; } .highlightRed { color: red !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span class="highlight" style="font-weight: bolder; font-size: 33px; color: #00F">&rarr;</span> 

的jsfiddle：

上面的代碼有望使給定的箭頭根據給定的間隔閃爍，但並非如此。 如何使箭頭相對於給定的間隔改變顏色？

Answer 1

您需要更改以下內容以使代碼正常工作。

1. 將jQuery附加到您的網頁。
2. 在$(function() { ... });內部使用您的JavaScript代碼$(function() { ... }); 代碼，以便在DOM找到元素
3. 將內聯樣式移動到附加的樣式表。
4. 款式highlightRed類應該來風格的后.highlight在樣式表。

注意：無需在樣式中使用!important 。 應盡可能避免。

 $(function() { var blinkText = $(".highlight"); var interval = setInterval(function () { blinkText.toggleClass("highlightRed"); }, 500); }); 

 .highlight { -webkit-transition: background 1.0s ease-in-out; -ms-transition: background 1.0s ease-in-out; transition: background 1.0s ease-in-out; font-weight: bolder; font-size: 33px; color: #00F; } .highlightRed { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span class="highlight">&rarr;</span> 

Answer 2

只需添加重要的顏色：紅色：

.highlightRed {
    color: red !important;
}

要么

如果您不想使用！important，因為！important id不是一個好習慣，只需執行以下操作：

1）從span刪除內聯css並將該樣式添加到任何名為custom的類中：

<span class="highlight custom">&rarr;</span>

.custom {
   font-weight: bolder; font-size: 33px; color: #00F;
}

2）如下定義highlightRed css類：

span.highlightRed {
    color: red;
}

Answer 3

 .highlightRed { color: red !important; }