为单个样式属性定义 setter

Question

根据当前的 CSS 规范，CSSStyleDeclaration.setProperty() 具有直接写入样式属性的简写。就像下面的代码一样，这两行具有相同的功能：

element.style.color = "#fff";
element.style.setProperty("color", "#fff");

虽然这里有一个有趣且不清楚的情况： 我找不到为单个样式属性挂钩自定义设置器的方法，因为它们没有明确的设置器。更改 setProperty 方法仅适用于直接调用方法 element.style.setProperty() 而不是简写（即 element.style.color）。

两者似乎都引用 CSSStyleDeclaration 接口，但我找不到为特定样式属性（即 element.style.color）定义 setter 的方法。

MDN 是这样说的：

虽然此属性被认为是只读的，但可以通过将字符串直接分配给 style 属性来设置内联样式。在这种情况下，字符串被转发到 CSSStyleDeclaration.cssText。以这种方式使用样式将完全覆盖元素上的所有内联样式。

据此，更改 cssText 的 setter 可能会拦截特定样式属性的 setter，但它仅适用于内联样式定义本身（即 element.style = 'color:#fff;'）

有没有办法为单个样式属性（例如 element.style.color）定义自定义设置器，或者至少为其中任何一个设置通用设置器？

Answer 1

正如您所解释的，设置样式属性有两种方法：

1. e.style.property=
2. e.style.setProperty(property,..)

根据实现的不同，这两种方式可以独立处理，也可以相互使用。 setProperty 调用方式 1 是非常不可能的。方式 1. 可以有一个 setter，它可能会或可能不会调用 setProperty。 该属性可能存在（具有属性描述符），或者方式 1. 可能以另一种方式处理（例如，通过捕获异常不存在的属性。） 这确实意味着，您可以将属性定义/重新定义为访问器，getter 调用 getPropertyValue，setter 调用 setProperty。然后，您可以注入任何调用（甚至是实例定义的）函数。

Object.defineProperty(CSSStyleDeclaration.prototype, "color", {configurable:true, enumerable:true, get:function() {return this.getPropertyValue("color");}, set:function(c) {let tunedC=tweakColor(c); this.setProperty("color", tunedC); handleNewPropertyValue(c, tunedC);}});

函数句柄NewPropertyValue(c,tweakedC) {...};

我在某些版本的 Chrome 中使用过这种方式，但我相信它会在大多数实现中使用，除了那些 setProperty 依赖于现有属性本身的实现（不太可能）。

在首次访问时调整原型以创建新的实例属性非常容易，但这是另一个问题。