HTML <blink> Implementation in JavaScript (Lightweight, Non-Polluting)

Dec 30, 2014   Web Development   Nick Vogt   Comments
Please note that this post is over a year old and may contain outdated information.
The <blink> HTML tag is an element that was introduced by Netscape in the 90's and caused text to blink continuously. It annoyed enough people that its functionality is now completely absent from modern browsers.

If you would like to bring <blink> back to your website, there are several implementations using CSS3, JavaScript, and even jQuery. I find these to be more complicated than necessary though, and the CSS3 implementation lacks some browser support.

Here is a simpler JavaScript implementation that does not pollute the global namespace at all:

setInterval(function() {
    var list = document.getElementsByTagName('blink');
    for (var i = this.list.length - 1; i >= 0; i --) {
        list[i].style.color = list[i].style.color == 'transparent' ? 'inherit' : 'transparent';
}, 1000);

Other than simplicity, this implementation also allows the blinking text to be highlighted. This will also pick up on any new <blink> elements added to the DOM.

Here is example HTML of it being used:

Some of <blink>this text</blink> will <blink>blink</blink>!
See it in action in this Fiddle:

Share This Post

Comments (0)

Share This Post
H3XED © Nick Vogt   RSS   Policies   Twitter