Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML DOM Marquee Object

  • Difficulty Level : Basic
  • Last Updated : 10 Mar, 2022

The HTML DOM Marquee Object is used to 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");

 

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 space of the <marquee> tag.
  • vspace: It is used to set or return the vspace of 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>

Output:

HTML DOM Marquee Object

Supported browsers:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!