HTML DOM ul compact Property

Last Updated : 21 Jun, 2023

The HTML DOM ul compact property is used to set or return the value of a compact attribute of the <ul> tag. The compact attribute is used to define the list should be smaller than normal by reducing the space between the list items and the indentation of the list. It is a Boolean attribute.

Note: This property is not supported in HTML5.

Syntax:

It returns a ul compact Property.

ulObject.compact

It is used to set the ul compact property.

ulObject.compact = "True/false";

Property Values:

true: It defines that the compact attribute is set.
false: It has a default value. It defines that the compact attribute is not set.

Return Values: It returns a Boolean value that represents whether the compact attribute is set to true or false.

Example 1: In this example, we will see the use of DOM ul compact Property

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
          DOM ul compact Property
      </title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM ul compact Property </h2>
    <ul id="Geeks" type="circle" compact>
        <!-- Assigning id to 'li tag' -->
        <li id="GFG">Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
    <button onclick="myGeeks()">
          Submit
      </button>
    <p id="sudo"></p>
 
    <script>
        function myGeeks() {
            // return ul compact Property
            let g = document.getElementById(
                "Geeks").compact;
            document.getElementById(
                "sudo").innerHTML = g;
        }
    </script>
   
</body>
 
</html>

Output:

Example 2: In this example, we will see the use of DOM ul compact Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
          DOM ul compact Property
      </title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <h2>DOM ul compact Property </h2>
    <ul id="Geeks" type="circle" compact>
       
        <!-- Assigning id to 'li tag' -->
        <li id="GFG">Geeks</li>
        <li>Sudo</li>
        <li>Gfg</li>
        <li>Gate</li>
        <li>Placement</li>
    </ul>
    <button onclick="myGeeks()">
          Submit
      </button>
    <p id="sudo"></p>
 
    <script>
        function myGeeks() {
            // set ul compact Property
            let g = document.getElementById(
                "Geeks").compact = "false";
            document.getElementById(
                "sudo").innerHTML = g;
        }
    </script>
   
</body>
 
</html>