HTML - DOM Style Object objectPosition Property

Quiz

HTML DOM Style Object objectPosition property defines how an image or video should be positioned in it's content box.

Syntax

Set the objectPosition property:

object.style.objectPosition= "position | initial | inherit";

Get the objectPosition property:

object.style.objectPosition;

Property Values

Value	Description
position	It specifies image or video position inside content box. It accepts two values where first value defines x-axis value and seconf value defines x-axis value. Values can be string or numbers.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string or number value which represents element's position in it's content box.

Example of HTML DOM Style Object 'objectPosition' Property

The following example sets position of given image using length value and percentage value.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object objectPosition Property
    </title>
    <style>
        #image {
           height: 500px;
           width: 500px;
           object-fit: none;
        }
    </style>
</head>
<body>
    <h3>
        Click to set objectPosition property.
    </h3>
    <button onclick="fun()">Set Position</button>
    <button onclick="funThree()">Set Position in %</button>
    <br>
    <img src="/html/images/test.png" id="image">
    <script>
        function fun() {
            let x = document.getElementById("image")
                .style.objectPosition = "120px 120px";
        }
        function funThree() {
            let x = document.getElementById("image")
                .style.objectPosition = "40% 50%";
        }
    </script>
</body>
</html>

Supported Browsers

Property
objectPosition	Yes 32	Yes 79	Yes 36	Yes 10	Yes 19

html_dom.htm

Print Page