How to Blink Text in JavaScript

Anika Tabassum Era Feb 02, 2024

Use window Object to Trigger the Blink Function in JavaScript
Use onload Attribute to Set Blink Function in JavaScript
Use jQuery ready() Function to Blink Text in JavaScript

This article will see three examples of implementing a code block to enable text blinking in JavaScript.

Use `window` Object to Trigger the Blink Function in JavaScript

We will use the addEventListener method for the window object to trigger the load event. We will set the interval for the blink, and here 1000 means 1 second.

This means it will keep the text on the page for one second and vanish for 1 second and repeat.

Code Snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="blink">Blink with window object</div>
  <script>
  window.addEventListener("load", function() {
    var b = document.getElementById('blink');
    setInterval(function() {
        b.style.display = (b.style.display == 'none' ? '' : 'none');
    }, 1000);
}, false);
  </script>
</body>
</html>

Output:

Use window Object to Trigger the Blink Function

Use `onload` Attribute to Set Blink Function in JavaScript

The onload attribute is usually added in the body element, and whenever the file is in operation, the onload function gets fired at first. So, the function blink() has been defined with all necessary declarations, and the blinking text performs its job.

Code Snippet:

<html>
<body onload="blink();">
  <div id="blink">Blink on onload</div>
  <script>
  function blink() {
   var b = document.getElementById('blink');
   setInterval(function() {
      b.style.display = (b.style.display == 'none' ? '' : 'none');
   }, 1000);
}
  </script>
</body>
</html>

Output:

Use onload Attribute to Set Blink Function

Use jQuery `ready()` Function to Blink Text in JavaScript

The jQuery ready() event is functional only when the window is loaded. So, the function will play its role as it is declared on every load.

The setInterval function will change the displayed interval, and thus the function will create the blink effect.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.6.4.js"></script>
  <script>
  $(document).ready(function() {
    var b = document.getElementById('blink');
    setInterval(function() {
        b.style.display = (b.style.display == 'none' ? '' : 'none');
    }, 1000);
});
  </script>
<div id="blink">Blink with jQuery</div>
</body>
</html>