HTML - DOM Style 对象 objectPosition 属性

HTML DOM Style 对象的 **objectPosition** 属性定义了如何在内容框中定位图像或视频。

语法

设置 objectPosition 属性

object.style.objectPosition= "position | initial | inherit";

获取 objectPosition 属性

object.style.objectPosition;

属性值

值	描述
position	它指定内容框内图像或视频的位置。它接受两个值，第一个值定义 x 轴值，第二个值定义 y 轴值。值可以是字符串或数字。
initial	用于将此属性设置为其默认值。
inherit	用于继承其父元素的属性。

返回值

它返回一个字符串或数字值，表示元素在其内容框中的位置。

HTML DOM Style 对象“objectPosition”属性示例

以下示例使用长度值和百分比值设置给定图像的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object objectPosition Property
    </title>
    <style>
        #image {
           height: 500px;
           width: 500px;
           object-fit: none;
        }
    </style>
</head>
<body>
    <h3>
        Click to set objectPosition property.
    </h3>
    <button onclick="fun()">Set Position</button>
    <button onclick="funThree()">Set Position in %</button>
    <br>
    <img src="/html/images/test.png" id="image">
    <script>
        function fun() {
            let x = document.getElementById("image")
                .style.objectPosition = "120px 120px";
        }
        function funThree() {
            let x = document.getElementById("image")
                .style.objectPosition = "40% 50%";
        }
    </script>
</body>
</html>

支持的浏览器

属性
objectPosition	是 32	是 79	是 36	是 10	是 19

html_dom_style_object_reference.htm

打印页面