Skip to content
Related Articles

Related Articles

HTML | DOM Style objectPosition Property
  • Difficulty Level : Basic
  • Last Updated : 01 Aug, 2019

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:




    <!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:




    <!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:




    <!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 31.0
  • Internet Explorer 16.0
  • Firefox 36.0
  • Opera 19.0
  • Apple Safari 10.1
My Personal Notes arrow_drop_up
Recommended Articles
Page :