为什么设置objectPosition会导致我的JavaScript崩溃

Question

样式objectPosition属性给出了设置objectPosition的示例：

document.getElementById("myImg").style.objectPosition = "0 10%";

然而，当我尝试设置objectPosition时，它会导致我的JavaScript崩溃。

在下面的代码中，我使用CSS设置objectPosition，如下所示：

#img1 {
object-position: 0 0;
width:  635px ;
height: 580px ;
}

在函数getImg的底部附近，我的调试代码("insert"语句(显示它被设置为"0px 0px"。但是，如果我继续

imgStyle.objectPosition = "0 0";

不执行"插入"语句和以下所有语句。以下是我的完整代码，其中注释了冒犯性的语句：

"use strict";
const numberOfFigures = document.getElementsByTagName('figure').length;
const scale = 3; // scaling up factor
// The function "insert" is used purely for debug purposes
function insert(figNum) {
document.getElementById("para").innerHTML = "OK so far" + figNum;
}
// Create all thumbnails & big images.
for (let i = 0; i < numberOfFigures; i++) {
getImg(i + 1);
}

function getImg(figNum) {
// Create the thumbnails and big images
let startPosn = "0px"; // x-coordinate of object-position for thumbnail
var btnDiv = document.createElement('div');
btnDiv.setAttribute("id", "bigImg" + figNum);
btnDiv.style.backgroundColor = "white";
// Get the figure caption
const figcap = document.getElementById("fig" + figNum).firstElementChild;
btnDiv.innerHTML =
'<button type="button"' +
'class="displayBtn"' +
'onclick="hideBigImg (' +
figNum +
')">Hide large image</button>';
const btnPtr = figcap.appendChild(btnDiv);
/* Append the button to the
figcaption */
var imgDiv = document.createElement('div');
imgDiv.setAttribute("id", "imgDiv" + figNum);
if (figNum === 1) {
/* First image needs height: 100vh or only the top slice is
displayed. Other images may be messed up if this is applied to
them. */
imgDiv.innerHTML = '<' + 'img id="img' + figNum + '" ' +
'class = "sprite-img" ' +
'src="bates-sprite.jpeg" ' +
'style="height: 100vh; ' +
'transform-origin: top left; ' +
'transform: scale(' +
scale + ');">';
} else {
imgDiv.innerHTML = '<' + 'img id="img' + figNum + '" ' +
'class = "sprite-img" ' +
'src="bates-sprite.jpeg" ' +
'style="transform-origin: top left; ' +
'transform: scale(' +
scale + ');">';
}
const imgPtr = btnPtr.appendChild(imgDiv);
/* Append the img to the
button */
/* Make imgDiv high enough to hold the scaled up image & make the
accompanying text visible.
IMPORTANT to do this AFTER creating & appending the. */
// Get the height and width of the image
let img = document.getElementById("img" + figNum);
const imgStyle = getComputedStyle(img);
// Set imgDiv to exactly hold image
imgDiv.style.width = parseInt(imgStyle.width) * scale + "px";
imgDiv.style.height = parseInt(imgStyle.height) * scale + "px";
imgDiv.style.overflow = "hidden"; // Clip off rest of sprite
/*********************** Create thumbnail here *************/
let thumbHTML = '<' + 'div id="thumbDiv' + figNum + '" ' +
'onclick = "showBigImg(' +
figNum + ')" ' +
'style="float: left; ' +
'height: imgStyle.height; ' +
'width: imgStyle.width; ' +
'margin-right: 1.5em; ' +
'background-color: white; ' +
'border: thick solid black;"> ' +
'<' + 'img id="img' + figNum + '" ' +
'class = "sprite-img" ' +
'src="bates-sprite.jpeg" ' +
'style="transform-origin: top left; ' +
'transform: scale(0.5);" ' +
'onclick = "showBigImg(' +
figNum + ')";>' +
'</div>';
figcap.insertAdjacentHTML("afterend", thumbHTML);
/* Append the
thumbnail to the
figcaption       */

/* Shrink the div to match the size of the thumbnail, and free up all the
blank space which the full size image would have occupied if it hadn't
been reduced with transform: scale */
let thumbnail = document.getElementById("thumbDiv" + figNum);
thumbnail.style.width = parseInt(imgStyle.width) / 2 + "px";
thumbnail.style.height = parseInt(imgStyle.height) / 2 + "px";
// Set object-position for image in sprite
//imgStyle.objectPosition = "0 0";
insert(imgStyle.objectPosition);
hideBigImg(figNum);
}
function showBigImg(figNum) {
document.getElementById('bigImg' + figNum).style.display = 'block';
document.getElementById('thumbDiv' + figNum).style.display = 'none';
}
function hideBigImg(figNum) {
document.getElementById('bigImg' + figNum).style.display = 'none';
document.getElementById('thumbDiv' + figNum).style.display = 'block';
}

/* Global constants */
:root {
--shrink: 0.30;
/* Size compressed to 30% */
}
figure {
display: block;
width: 96%;
float: left;
border-width: thin;
}
figcaption {
background-color: yellow;
}
.sprite-img {
background-repeat: no-repeat;
object-fit: none;
}
#img1 {
object-position: 0 0;
width: 635px;
height: 580px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="general.css">
</head>
<body>
<figure id="fig1">
<figcaption>Camberley Mail</figcaption>
<p id="para">Text to go with picture.</p>
</figure>
</body>
</html>

Answer 1

程序"崩溃"或更具体地抛出Exception的原因是因为您试图修改只读对象的属性。

详细信息：

const img = document.querySelector("img");
const imgStyle = getComputedStyle(img); // imgStyle is a read-only object
imgStyle.objectPosition = "0 0";

以上代码将抛出：

Uncaught DOMException: Failed to set the 'object-position' property on 'CSSStyleDeclaration': These styles are computed, and therefore the 'object-position' property is read-only.

如MDN文件所述：

"getComputedStyle中的对象是只读的，应该用于检查元素的样式，包括元素或外部样式表设置的样式。

element.style对象应用于设置该元素的样式，或检查从JavaScript操作或全局样式属性直接添加到其中的样式">

因此，基于文档，您应该使用element.style对象来设置属性：

img.style.objectPosition = "0 0";