• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Actual Wizard

Actual Wizard

Great Content From Actual Wizards

  • Blogging
  • Programming
  • Social Media
  • Marketing
You are here: Home / Programming / JavaScript

JavaScript String Blink Method Explained

August 14, 2020 by Kevin Marszalek

The HTML code to wrap text in HTML blink tags can be generated using JavaScript:

MyHTML = MyText.blink();

Two Important Notes About the Blinking HTML and JS!

  • The blink JavaScript method is not standardized and may not behave consistently in all browsers.
  • The blink HTML tag does not function at all in many modern web browsers.

Using either the JavaScript blink method or using the HTML tag should be avoided.

If you would like to have elements blink, such as text or images, then you must use CSS and HTML.

Since the blink JavaScript method will produce still valid markup, a functional example that demonstrates the old method is provided here.

Working JavaScript and CSS Blinking Text Example

Although the blink HTML tag is no longer used, it is relatively easy to achieve the blinking effect using HTML and CSS.

This example below uses JavaScript in the case that you can not easily add a style to the document any other way.

A more common way to add the style would be to add a style tag to the page instead of inserting the new style tag into the document head through the DOM.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>JavaScript String Blink Method Alternative</title>
</head>
<body>
	<h1>An Example of How To Generate HTML With a Blink Tag Alternative in JavaScript</h1>	
	<div id="demo"></div>
<script>
	var MyText = "Example of how to have blinking elements with JavaScript and HTML.";
	var MyStyle = 
`<style>
.blinking{
	animation:blinkingElement 1.0s infinite;
}
.empty-box{
	width:250px;
	height:50px;
	background-color:black;
	color:white;
	text-align:center;
	vertical-align:middle;
	line-height:50px;
	margin:16px;
}
@keyframes blinkingElement{
	0% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
</style>`
	var MyHTML = "<div class=\"blinking\">" + MyText + "</div>";
	MyHTML += "\n<div class =\"blinking empty-box\">Blinking Box</div>";
	document.head.innerHTML += MyStyle;
	document.getElementById("demo").innerHTML = MyHTML;
</script>
</body>
</html>

Pure HTML and CSS Blinking Text Example

The most common situation would be that JavaScript is not needed to achieve the blinking effect.

This example below only uses HTML and CSS, and there is no JavaScript code used at all.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>Pure HTML and CSS Blinking Text</title>
</head>
<body>
	<h1>An Example of Blinking Text with HTML and CSS</h1>
<style>
.blinking{
	animation:blinkingElement 1.0s infinite;
}
.empty-box{
	width:250px;
	height:50px;
	background-color:black;
	color:white;
	text-align:center;
	vertical-align:middle;
	line-height:50px;
	margin:16px;
}
@keyframes blinkingElement{
	0% {opacity:1;}
	49% {opacity:1;}
	50% {opacity:0;}
	100% {opacity:0;}
}
</style>
<div class="blinking">Example of Pure CSS and HTML Blinking Text</div>
<div class="blinking empty-box">Blinking Box</div>
</body>
</html>

JavaScript String Blink Method Example

This example is outdated and should not be used.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>JavaScript String Blink Method Example</title>
</head>
<body>
<script>
	var MyText = "Demo of the JavaScipt Blink String Method";
	var MyHTML = MyText.blink();
	document.write(MyHTML);
</script>
</body>
</html>

Which will create the following HTML:

<blink>Demo of the JavaScipt Blink String Method</blink>

Using the Blink Method With An Argument

The blink method does not take an argument, but passing an argument to it does not generate an error message. This behavior is consistent with other string methods that do not expect an argument.

MyText.blink("this text passed as an argument does nothing");

Using the Blink Method Without a Variable

It is worth mentioning that the blink method can be called on a string that is not stored in a variable.

The following code will work but is discouraged because it can be confusing to read.

document.write('Non-functional Blinking Text'.blink());

JavaScript will determine that the text within the quotes is a string and apply the blink() method to it.

Filed Under: JavaScript

Read More From Actual Wizard

  • Understanding the Different Parts of an Email Address
    An email address has four parts; the recipient name, the @ symbol, the domain name, and the top-level domain. …
  • How to Get the Last Element of an Array in JavaScript
    There are a number of different ways to get the last element of an array in JavaScript. Below we will explore …
  • How to use document.write() in JavaScript
    How to use document.write() in JavaScript The document.write() function is commonly used when testing simple …
  • How to Open a New Tab with JavaScript
    Opening a new browser window in a new tab can be done easily in JavaScript. Modern web browsers provide a …

Primary Sidebar

More posts from this section

  • How to Get the Last Element of an Array in JavaScript
  • How to use document.write() in JavaScript
  • How to Open a New Tab with JavaScript
  • How to Convert an HTML Node to a String in JavaScript
  • JavaScript String Anchor Method Explained
  • JavaScript String Big Method Explained
  • JavaScript String Blink Method Explained
  • JavaScript String Bold Method Explained
  • JavaScript String charAt Method Explained
  • JavaScript String charCodeAt Method Explained

Copyright © 2025 ActualWizard.com

  • About
  • Terms of Service
  • Privacy Policy
  • Cookie Policy