HTML DOM offsetTop Property

Last Updated : 13 Jun, 2023

The DOM offsetTop property is used to return the top position which is relative to the top of the offsetParent element.

Syntax:

object.offsetTop

Return Value: A number in the pixel unit represents the top position of the element.

Example: In this example, we will use DOM offsetTop property

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #offsetdiv {
            top: 80px;
            margin: 20px;
            padding: 10px;
            width: 350px;
            position: absolute;
            border: 5px solid green
        }
    </style>
</head>
<body>
    <h3>Geeks for Geeks</h3>
    <h3>HTML DOM offsetTop property</h3>
    <div id="offsetdiv">
        <p>
            <button onclick="GFGfunction()">Try it</button>
        </p>
        <p>offsetTop is: <span id="gfg"></span></p>
    </div>
    <script>
        function GFGfunction() {
            let x = document.getElementById("offsetdiv");
            document.getElementById("gfg").innerHTML =
                offsetdiv.offsetTop;
        }
    </script>
</body>
</html>

Output:

Supported Browsers:

Google Chrome 1 and above
Edge 12 and above
Internet Explorer 5.5 and above
Firefox 1 and above
Opera 8 and above
Safari 3 and above

S

ShivamGupta63

Improve

Previous Article

HTML DOM Style animationDuration Property

HTML DOM Style animationIterationCount Property

Similar Reads

HTML DOM lang Property

In HTML document, the lang property is used to set or return the value of the lang attribute of an element. This attribute specifies the language code of the element's content. The element attribute takes "en" for English, "ja" for Japanese, "es" for Spanish, and so on. The default value of this attribute is unknown. Syntax: Get the value of lang:

HTML DOM Style backgroundClip Property

The DOM style backgroundClip Property is used to set or return the painting area of the background. Syntax: It is used to return the backgroundClip property.object.style.backgroundClip It is used to set the backgroundClip property. object.style.backgroundClip = "border-box|padding-box|content-box|initial|inherit" Property Values: border-box propert

HTML DOM Style borderTop Property

The DOM style borderTop property is used to set or return the three different border-top property such as border-top-width, border-top-style, and border-top-color of an element. Syntax: It returns the borderTop property. object.style.borderTopIt is used to set the borderTop property. object.style.borderTop = "width style color|initial|inherit" Prop

HTML | DOM Meter max Property

The DOM Meter max Property is used to set or return the value of the max attribute of a gauge. The max attribute is used to specify the upper bound of the gauge and the value of the max attribute must be greater than the value of the min attribute. It has a default value which is 1. Syntax: It return the max property.meterObject.maxIt is used to se

HTML | DOM Input Hidden value Property

The Input Hidden value property in HTML DOM is used to set or return the value of the value attribute of the hidden input field. The value attribute defines the default value of the input hidden field. Syntax: It returns the value property.hiddenObject.valueIt is used to set the value property.hiddenObject.value = text Property Values: This propert

HTML DOM Marquee direction Property

The marquee direction property in HTML DOM is used to set or return the value of the direction attribute of the <marquee> tag. Syntax: It is used to return the marquee direction property. marqueeObject.direction; It is used to set the marquee direction property. marqueeObject.direction = "up|down|left|right" Note: This property is depreciated

HTML | DOM Textarea autofocus Property

The DOM Textarea autofocus Property is used to set or return whether the element should get focus when the page loads. This property is used to reflect the HTML autofocus attribute. Syntax: It is used to Return the autofocus property. textareaObject.autofocusIt is used to Set the autofocus property. textareaObject.autofocus = true|false Property Va

HTML | DOM Style columnGap Property

The DOM Style columnGap property specifies the gap between the columns. Syntax : For return the value: object.style.columnGap For set the value: object.style.columnGap = "length|normal|initial|inherit" Property Values: length: Set the column gap in length unit. normal: The default value of column gap. initial: Sets the default value. inherit: Inher

HTML | DOM Input Time autofocus Property

The DOM Input Time autofocus Property in HTML DOM is used to set or return whether the time field should automatically get focus or not when the page loads. This Property is used to reflect the HTML autofocus attribute. Syntax: It returns an autofocus Property. timeObject.autofocus It is used to set the autofocus property. timeObject.autofocus = tr

HTML DOM Input Submit formTarget Property

The Input Submit formTarget Property in HTML DOM is used to set or return the value of the formtarget attribute of the submit field. The Target attribute is used to specify whether the submitted result will open in the current window, a new tab or on a new frame. Syntax: It is used to return the formTarget property.submitObject.formTargetIt is used

Article Tags :