如何将document.querySelector的属性以变量形式传入自定义函数？

你的代码存在两个核心问题：

• 错误使用模板字符串拼接属性访问语法，JavaScript不支持这种写法
• 传入的属性名带前缀.，导致属性名与DOM元素的真实属性不匹配

正确的函数写法 #

要动态访问对象属性，必须使用方括号语法，同时属性名不要带.前缀：

const setElementProperty = (className, propName, value) => {
  const element = document.querySelector(`.${className}`);
  // 增加元素存在判断，避免找不到元素时报错
  if (element) {
    element[propName] = value;
  }
};

调用方式 #

直接传入不带.的属性名即可：

setElementProperty('message', 'textContent', '⛔️ No Number!');

原理说明 #

JavaScript中访问对象属性有两种合法方式：

1. 点语法：仅支持固定属性名，比如element.textContent
2. 方括号语法：支持用变量作为属性名，比如element[propName]，这里propName就是你传入的属性名字符串

原来的写法试图用模板字符串拼接点语法，不符合JavaScript语法规则，自然无法生效；同时传入.textContent会让程序去寻找名为.textContent的属性，而DOM元素并没有这个属性，只有textContent属性，所以也会失败。

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