Skip to content
Related Articles

Related Articles

HTML | DOM ul compact Property

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Aug, 2022
View Discussion
Improve Article
Save Article

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 the 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 the compact attribute is set to true or false.

Example 1:  

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
            var g = document.getElementById(
                "Geeks").compact;
            document.getElementById(
                "sudo").innerHTML = g;
        }
    </script>
</body>
</html>

Output: 

  • Before Clicking On Button: 

  • After Clicking On Button: 

Example 2:  

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
            var g = document.getElementById(
                "Geeks").compact = "false";
            document.getElementById(
                "sudo").innerHTML = g;
        }
    </script>
</body>
</html>

Output: 

  • Before Clicking On Button:

  • After Clicking On Button: 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!