JavaScript新手求教：如何实现类似className的可直接赋值的idName属性？

嘿，这个需求很合理！你现在用方法的方式虽然能实现功能，但确实不如直接赋值来得顺手。要达成像className那样的直接读写效果，咱们得用对象的getter和setter属性来定义，而不是添加一个方法。

具体实现代码 #

直接给Element.prototype定义一个带有get和set的属性就行，用Object.defineProperty来完成：

// 给所有Element实例添加idName属性
Object.defineProperty(Element.prototype, 'idName', {
  // 读取idName时触发
  get() {
    return this.id;
  },
  // 给idName赋值时触发
  set(value) {
    this.id = value;
  },
  // 可选：让这个属性能被枚举（比如for...in遍历元素属性时会显示）
  enumerable: true,
  // 可选：允许后续修改或删除这个属性配置
  configurable: true
});

怎么用？ #

现在你就可以像用className一样直接操作idName了：

// 示例1：给现有元素设置idName
const myBtn = document.querySelector('button');
myBtn.idName = 'submit-btn';
console.log(myBtn.id); // 输出 "submit-btn"，和idName同步

// 示例2：创建新元素时赋值
const newDiv = document.createElement('div');
newDiv.idName = 'container';
document.body.appendChild(newDiv);

一点小说明 #

• get()函数会在你读取element.idName的时候自动执行，返回当前元素的id值；
• set(value)函数会在你给element.idName = xxx赋值时触发，把传入的value赋值给元素的原生id属性；
• enumerable和configurable是可选配置：如果不需要这个属性被枚举（比如遍历元素属性时不想看到它），可以把enumerable设为false（默认就是false）；configurable设为true允许你之后修改或删除这个自定义属性。

这种方式完全模拟了原生属性的行为，用起来和className、innerText这些原生属性一模一样~

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