JavaScript自定义styleMe属性：获取样式正常但无法设置值的问题

你的问题核心在于两点：一是对Object.defineProperty的setter作用场景理解有误，二是忽略了计算样式对象是只读的这一关键特性。我们来一步步修正：

问题分析 #

1. 原setter完全无效：你写的set: function(key, newValue)是错误的——Object.defineProperty的setter仅接受一个参数（即要赋值给styleMe本身的值），而且只有当你直接执行element.styleMe = xxx时才会触发，完全覆盖不了styleMe.xxx = yyy这种属性赋值操作。
2. 计算样式不能直接修改：getComputedStyle或currentStyle返回的是元素的计算样式对象，它的所有属性都是只读的，直接给这些属性赋值不会有任何效果，必须通过元素的style属性设置内联样式才能改变最终渲染效果。

修正后的代码 #

我们可以用Proxy来实现「读取计算样式+设置内联样式」的双向代理，完美满足你的需求：

(function (constructor) {
  if (constructor && constructor.prototype) {
    Object.defineProperty(constructor.prototype, 'styleMe', {
      get: function () {
        const element = this;
        if (!element) return {};
        
        // 返回一个Proxy代理对象，拦截属性的读写
        return new Proxy({}, {
          // 读取属性时，获取计算样式对应的值
          get(target, prop) {
            const computedStyle = window.getComputedStyle 
              ? getComputedStyle(element, null) 
              : element.currentStyle;
            return computedStyle[prop];
          },
          // 设置属性时，把值写入元素的内联style
          set(target, prop, value) {
            element.style[prop] = value;
            return true; // 必须返回true表示设置成功
          }
        });
      },
      // 不需要设置styleMe本身，所以禁用setter
      set: undefined
    });
  }
})(window.Node || window.Element);

工作原理 #

• 当你执行element.styleMe.marginTop时，Proxy的get陷阱会触发，自动获取该元素的计算样式并返回对应属性值。
• 当你执行element.styleMe.marginTop = "30px"时，Proxy的set陷阱会触发，把值直接写入元素的style.marginTop（内联样式），内联样式的优先级高于计算样式，所以最终会生效。

注意事项 #

• 属性名要使用驼峰式（比如marginTop而非margin-top），和原生element.style的属性命名规则保持一致。
• 对于IE8及以下的老旧浏览器，Proxy不被支持，如果需要兼容这些环境，可以改用定义一个包含所有样式属性的对象，手动给每个属性添加getter和setter，但这种方式代码量会大很多，建议优先用Proxy方案。

内容的提问来源于stack exchange，提问作者iMatoria