Как изменить цвет текста в разных фрагментах

Скажем, у меня есть простой слайд reveal.js:

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

Я хочу изменить цвет Text на красный после появления Fragment на экране. Как мне это сделать?

Ответ 1

Это не довольно просто:

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

Ответ 2

Вы можете просто сделать

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

Таким образом, красный текст и текст "Фрагмент" всегда будут синхронизироваться.

Ответ 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>