HTML DOM children Property

HTML DOM clientTop Property

Last Updated : 13 Jun, 2023

The DOM clientTop Property is used to return the width of the top border to an element in terms of pixel.It does not include the measurement of the width of the top padding or the left margin.It is read-only property.

Syntax:

element.clientTop

Return Value: It returns a numeric value which represent the width of the Top border to an element.

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML | DOM clientTop Property
    </title>
    <style>
        h1 {
            color: green;
            font-size: 35px;
        }
        
        #GFG {
            height: 100px;
            width: 350px;
            padding: 20px;
            margin: 25px;
            border-left: 10px solid coral;
            border-top: 15px solid blue;
            background-color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>DOM clientTop Property </h2>

        <div id="GFG">
            <p style="color:white;font-size:25px;">
                GeeksforGeeks
            </p>
            <p id="sudo" style="color:white;"></p>
        </div>
        <button onclick="Geeks()">Submit</button>
        <script>
            function Geeks() {
                var w = document.getElementById("GFG");

                // Using clientTop property
                var x = "Border-Top-Width is: "
                + w.clientTop + "px<br>";

                x += "Border-Left-width : " 
                + w.clientLeft + "px";
                document.getElementById("sudo").innerHTML = x;
            }
        </script>

</body>

</html>

Output:

Initially:

After Click on the Button:

Supported Browsers: The browser supported by DOM clientTop property are listed below:

Google Chrome 1.0 and above
Edge 12.0 and above
Internet Explorer 5.0 and above
Firefox 3.0 and above
Opera 8.0 and above
Safari 3.0 and above

HTML DOM children Property

M

manaschhabra2

Improve

Article Tags :

Similar Reads

HTML DOM clientLeft Property

The DOM clientLeft Property is used to return the width of the left border to an element in terms of pixel.It does not include the measurement of the width of the left padding or the left margin.It is read-only property. Syntax: element.clientLeft Return Value: It returns a numeric value which repre

HTML DOM clientWidth Property

The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width. This property only returns the actual width of an element that is viewable or visible to the user. It is a read-only propert

HTML DOM clientHeight Property

The DOM clientHeight property is used to return the viewable height of an element in terms of the pixel. It includes the measurement of the width of padding but does not include the margin, border, and scrollbar property for the measurement of the element width. This property only returns the actual

HTML DOM children Property

The DOM children property is used to return an HTML collection of all the child elements of the specified element. The elements in the collection can be accessed by index numbers. It differs from childNodes as childNodes contain all nodes (i.e. it includes text and comment nodes as well) but on the

HTML DOM cookie Property

Almost every website stores cookies (small text files) on the user's computer for recognition and to keep track of his preferences. DOM cookie property sets or gets all the key/value pairs of cookies associated with the current document.Getting all the Cookies:Â The document.cookie method returns a s

HTML DOM documentMode Property

The DOM documentMode property in HTML is an IE8 property that is used to detect the document mode used by the browser to render the current page. It returns a different number depending on the mode of the page in which it is being rendered because IE8 can render a page in various modes depending on

HTML | DOM documentURI Property

The documentURI property in HTML DOM used to set or return the location of a document. The return value is null If the document was created by the DocumentImplementation object or undefined. The documentURI property can be used on any document types. Syntax: Return the documentURI property: document

HTML | DOM MouseEvent clientY Property

The MouseEvent clientY property is a read-only property which is used to return the vertical coordinate of the mouse pointer based on the current window when a mouse event was triggered. Syntax : event.clientY Return Value: It returns a number that represents the vertical coordinate of the mouse poi

HTML DOM designMode Property

The DOM designMode property in HTML is used to specify whether the document is editable or not. It can also be used to set the document editable.Â Syntax:Set: This property is used to set whether the document is editable or not.document.designMode = "on|off";Get: This property is used to return wheth

HTML DOM MouseEvent clientX Property

The mouse event clientX property returns the horizontal coordinate (X-axis) of the mouse pointer in relation to the viewport when a mouse event occurs. It captures the mouse's position without considering any scroll offset.Syntax:event.clientXReturn Value: clientX returns the mouse pointer's X-coord