HTML DOM Marquee Object

The HTML DOM Marquee Object is used to represent the HTML <marquee> tag. We know that the <marquee> tag is used to move the content from horizontal to vertical or left to right or right to left.

Syntax

It is used to access the marquee tag.

document.getElementById("id");

It is used to create a marquee tag.

document.createElement("MARQUEE");

Note: This object is depreciated from HTML 5.

Property values:

bgcolor: It is used to set or return the value of the background color of the <marquee> tag.
behavior: It is used to set or return the value of the behavior attribute of the <marquee> tag.
scrollamount: It is used to set or return the speed of the <marquee> tag.
direction: It is used to set or return the value of the direction attribute of the <marquee> tag.
loop: It is used to set or return the value of the loop attribute of the <marquee> tag.
height: It is used to set or return the height of the <marquee> tag.
width: It is used to set or return the height of the <marquee> tag.
hspace: It is used to set or return the horizontal space around the <marquee> tag.
vspace: It is used to set or return the vertical space around the <marquee> tag.
scrollDelay : It is used to set or return the value of the scrolldelay attribute of a <marquee> Tag.
truespeed : It is used to set or return the value of the truespeed attribute of the <marquee> Tag.

Methods

start (): This method is used to start the scrolling of the Marquee Tag.
stop (): This method is used to stop the scrolling of the Marquee Tag.

Example 1: Below HTML code illustrates how to create a marquee object.

HTML

<!DOCTYPE html>

<html>
 
<body style="text-align:center;">

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>

    <h2>DOM Marquee Object</h2>

    <b>

        Click on the below button to 

        create a marquee object

    </b>

<p></p>
 
    <button onclick="createMarqueObject()">

        Create Marquee Object

    </button>
 
    <script>

        function createMarqueObject() {

            var elementVar = document.createElement("MARQUEE");

            var txt = document.createTextNode(

                "GeeksforGeeks:A computer Science Portal for Geek");

            elementVar.appendChild(txt);

            document.body.appendChild(elementVar);

        }

    </script>

</body>
 
</html>

Output:

Example 2: Below HTML code illustrates how to change the background color and font size of the marquee element.

HTML

<!DOCTYPE html>

<html>
 
<body style="text-align:center;">

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>
 
    <h2>DOM Marquee Object</h2>
 
    <marquee id="marqueeID">

        GeeksforGeeks:A computer Science

        Portal for Geeks

    </marquee>

    <br><br>
 
    <button onclick="btnClick()">

        Change BackGround Color

    </button>
 
    <script>

        function btnClick() {

            var txt = document.getElementById("marqueeID");

            txt.style.backgroundColor = "green";

            txt.style.fontSize = "25px";

        }

    </script>

</body>
 
</html>

Output:

Supported browsers:

Google Chrome 1.0
Edge 12.0
Firefox 65.0
Internet Explorer 2.0
Opera 7.2
Safari 1.2

Article Tags :

HTML

Web Technologies

HTML-DOM