ProgramTree/test.html at main · jbartlett777/ProgramTree · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highlight Example</title>
<style>
  /* Base state of the span */
  #Line1 {transition: background-color 2s ease;}

  /* Highlight effect */
  .HighlightLine {
    background-color: yellow;
  }
</style>
</head>
<body>

<span id="Line1">This is the line to highlight.</span>
<br><br>
<button onclick="highlightLine()">Highlight</button>

<script>
function highlightLine() {
  const el = document.getElementById("Line1");

  // Add highlight class
  el.classList.add("HighlightLine");

  // Force reflow so transition triggers
  void el.offsetWidth;

  // Remove class after 2s so it fades away
  setTimeout(() => {
    el.classList.remove("HighlightLine");
  }, 2000);
}
</script>

</body>
</html>