HTML DOM Style objectPosition Property

The HTML DOM Style objectPosition property returns and modify how an image or video element should be positioned in its own content box in an HTML document.

Syntax

Following is the syntax −

1. Returning objectPosition

object.objectPosition

2. Modifying objectPosition

object.objectPosition = “value”

Here, value can be −

Value	Explanation
Initial	It set this property value to its default value.
Inherit	It inherits this property value from its parent element.
Position	It represents the position of image or video element inside its content box.

Let us see an example of HTML DOM Style objectPosition Property −

Example

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .img-class {
      width: 200px;
      height: 250px;
      object-fit: cover;
   }
</style>
<body>
<h1 style="text-align:center">DOM Style objectPosition Property Demo</h1>
<img alt="Learn Java Swing" src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg" class="img-class" width='300' height='200'>
<button class="btn" onclick="set()">Set objectPosition</button>
<script>
   function set() {
      document.querySelector('.img-class').style.objectPosition = "100% 100%";
   }
</script>
</body>
</html>

Output

HTML DOM Style objectPosition Property

Click on “Set objectPosition” button to set object position property on image element −

HTML DOM Style objectPosition Property