HTML DOM Style objectPosition Property

HTMLDOMWeb DevelopmentFront End Technology

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 −

ValueExplanation
InitialIt set this property value to its default value.
InheritIt inherits this property value from its parent element.
PositionIt 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

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

raja
Published on 23-Sep-2019 15:28:39
Advertisements