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
View Discussion
Improve Article
Save Article

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!