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

列印頁面