如何更改不同片段中的文本颜色答案

【问题标题】：How to change text color in different fragments如何更改不同片段中的文本颜色
【发布时间】：2013-10-29 11:56:59
【问题描述】：

假设我有一个简单的reveal.js 幻灯片，如下所示：

 <section>
   <h1>Title</h1>
   <p >Text</p>
   <p class="fragment">Fragment</p>
 </section>

我想在屏幕上出现Fragment 后将Text 颜色更改为红色。我该怎么做？

【问题讨论】：

标签： reveal.js

【解决方案1】：

你可以这样做

<section>
  <h1>Title</h1>
  <p class="fragment highlight-red" data-fragment-index="1" >Text</p>
  <p class="fragment data-fragment-index="1"">Fragment</p>
</section>

这样，红色文本和“片段”文本将始终保持同步。

【讨论】：

【解决方案2】：

这并不简单：

<section>
  <h1>Title</h1>
  <p id="postfragment">Text</p>
  <p class="fragment">Fragment</p>
</section>
...
<script>
Reveal.addEventListener('fragmentshown', function(event) {
   document.getElementById("postfragment").style.color="red"; 
});
</script>

【讨论】：

【解决方案3】：

对于那些希望突出显示实际出现在之后（而不是同时）的人：

<section>
    <h1>Title</h1>
    <span class="fragment fade-in" data-fragment-index="1">
        <p class="fragment highlight-red" data-fragment-index="3">Text</p>
    </span>
    <p class="fragment" data-fragment-index="2">Fragment</p>
</section>

【讨论】：

【解决方案4】：

这里是如何用红蓝绿做的示例

<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>

【讨论】：