HTML DOM Marquee Object

Last Updated : 11 Jan, 2023

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:

HTML DOM Marquee Object

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>