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

Question

说我有一个这样的简单reveal.js幻灯片:

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

我想在屏幕上显示Text后将颜色更改为红色Fragment.我该怎么办？

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

这样,红色文本和"片段"文本将始终保持同步.

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