javascript - 更改样式属性

Question

我有一个元素，其中应用了以下样式:

<style>
    #hover  {
      border: 1px green;
      position: absolute;
      left: -100px; /* Should not be seen initially */
    }
</style>

在我的代码中，我正在读取和修改“left”属性。我最终得到了以下解决方案，它确实有效:

读取属性:

hover=document.getElementById("hover");
left=window.getComputedStyle(hover,null).getPropertyValue("left");

改变属性:

hover.style.left="25px";

我发现这种看似不对称的现象相当令人费解。例如，以下内容不起作用:

读取属性 - 不会那样工作，总是返回空字符串

left=hover.style.left

更改属性 - 出现错误“此对象不允许修改”

computedStyle = window.getComputedStyle(hover,null);
computedStyle.setProperty("left",'-101px','important');

我知道我最后的尝试甚至还不完整；创建一个新的样式对象后，我需要用某种方法将它放回元素，但是当我调用 setProperty 时已经出现错误消息。

现在我的问题是:获取和设置样式属性的唯一方法是真的吗，就像我最初所做的那样，还是有另一种可能性可以实现相同的目标？特别是，我想知道为什么我不能读取带有表达式“hover.style.left”的样式，而只能设置它。

Answer 1

element.style.* 映射到直接应用于元素的样式。有两种方法可以做到这一点:

• 通过 DOM
• 通过 HTML style attribute

您可以从中读取，但它只会读取直接应用于元素的 CSS 属性。由于您的属性最初是通过样式表设置的，因此它们不会出现在此处。

---

getComputedStyle 计算元素的样式，其方式与浏览器尝试呈现元素时的方式相同。它应用样式表中的规则和直接应用于元素的规则，应用级联逻辑等。

您不能写入它，因为规则来自许多不同的地方。

---

因此，如果您想从内联或其他地方获取规则，您必须使用 getComputedStyle，但无论您编写什么，都必须通过 .style.*。