Skip to content
Related Articles

Related Articles

HTML | DOM Style objectPosition Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 03 Jun, 2022

The DOM Style objectPosition property is used to set or return how an image or video would be positioned in their own content box. 

Syntax:

  • It returns the objectPosition property.
object.style.objectPosition
  • It is used to set the objectPosition property.
object.style.objectPosition = "position|initial|inherit"

Property Values:

  • position: This is used to specify the position of the image or video in terms of either length values or strings (left, right and center). 

Example-1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        DOM Style objectPosition Property
    </title>
    <style>
        .content {
            border: 1px solid;
            object-fit: cover;
            height: 250px;
            width: 500px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectPosition Property
    </b>
    <p>
      The objectPosition property
      specify how an image or video
      should be positioned in its content box.
    </p>
    <img src=
         height="800"
         width="800"
         class="content" />
   
    <button onclick="setObjectPosition()">
        Change resize
    </button>
 
    <!-- Script to set objectPosition to 50% 100% -->
    <script>
        function setObjectPosition() {
            elem = document.querySelector('.content');
            elem.style.objectPosition = '75% 100%';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button: 

position-before

  • After clicking the button:

 position-after

  • initial: This is used to set this property to its default value. 

Example-2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        DOM Style objectPosition Property
    </title>
    <style>
        .content {
            border: 1px solid;
            object-fit: cover;
            height: 250px;
            width: 500px;
            object-position: 50% 100%;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectPosition Property
    </b>
    <p>
        The objectPosition property specify
      how an image or video should be
      positioned in its content box.
    </p>
    <img src=
         height="800"
         width="800"
         class="content" />
 
    <button onclick="setObjectPosition()">
        Change resize
    </button>
 
    <!-- Script to set objectPosition to initial -->
    <script>
        function setObjectPosition() {
            elem = document.querySelector('.content');
            elem.style.objectPosition = 'initial';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 initial-before

  • After clicking the button:

initial-after

  • inherit: This inherits the property from its parent. 

Example-3: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        DOM Style objectPosition Property
    </title>
    <style>
        #parent {
            object-position: 50% 100%;
        }
         
        .content {
            border: 1px solid;
            object-fit: cover;
            height: 250px;
            width: 500px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectPosition Property
    </b>
    <p>
        The objectPosition property specify how an
      image or video should be positioned in its content box.
    </p>
    <div id="parent">
        <img src=
             height="800"
             width="800"
             class="content" />
    </div>
 
    <button onclick="setObjectPosition()">
        Change resize
    </button>
 
    <!-- Script to set objectPosition to inherit -->
    <script>
        function setObjectPosition() {
            elem = document.querySelector('.content');
            elem.style.objectPosition = 'inherit';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 inherit-before

  • After clicking the button:

 inherit-after

Supported Browsers: The browser supported by objectPosition property are listed below:

  • Google Chrome 32.0 and above
  • Edge 79 and above
  • Firefox 36.0 and above
  • Opera 19.0 and above
  • Apple Safari 10 and above
  • Internet Explorer not supported

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!