HTML | DOM Style objectPosition Property
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 >
function setObjectPosition() {
elem = document.querySelector('.content');
elem.style.objectPosition = '75% 100%';
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:
- After clicking the button:
- 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 >
function setObjectPosition() {
elem = document.querySelector('.content');
elem.style.objectPosition = 'initial';
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:
- After clicking the button:
- 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 >
function setObjectPosition() {
elem = document.querySelector('.content');
elem.style.objectPosition = 'inherit';
}
</ script >
</ body >
</ html >
|
Output:
- Before clicking the button:
- After clicking the button:
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
Share your thoughts in the comments
Please Login to comment...