更改样式属性

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');

我知道我的最后一次尝试甚至不完整;在创建一个新的样式对象之后，我需要somhow将它放回到元素中，但是当我调用setProperty时就会出现错误消息。

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

Answer 1

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

• 通过DOM
• 通过HTML style 属性

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

---

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

你不能写信，因为规则来自很多不同的地方。

---

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