如何为每个HTML元素添加setStyle方法，实现element.setStyle()调用？

当然可以实现这个需求！我们只需要扩展原生Element的原型，就能让所有HTML元素都拥有这个可直接调用的setStyle()方法，完全符合你想要的element.setStyle("display","none")调用形式。

基础实现方案 #

直接给Element.prototype添加自定义方法，代码非常简洁：

// 给所有HTML元素添加setStyle方法
Element.prototype.setStyle = function(property, value) {
  // this指向调用该方法的DOM元素
  this.style[property] = value;
};

使用示例 #

// 获取页面上的某个元素
const targetElement = document.querySelector('.my-element');

// 隐藏元素
targetElement.setStyle('display', 'none');

// 修改文字颜色
targetElement.setStyle('color', '#ff4444');

// 设置字体大小（注意这里要用驼峰命名fontSize，对应CSS的font-size）
targetElement.setStyle('fontSize', '16px');

进阶优化：支持批量设置与CSS原生命名 #

如果想要更灵活的使用体验，我们可以扩展方法，让它同时支持单个样式设置和批量样式设置，还能兼容CSS的短横线命名（比如font-size）：

// 辅助函数：把CSS短横线命名转换为DOM style的驼峰命名
function toCamelCase(str) {
  return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
}

Element.prototype.setStyle = function(property, value) {
  // 情况1：传入的是对象，批量设置样式
  if (typeof property === 'object') {
    Object.entries(property).forEach(([prop, val]) => {
      const camelProp = toCamelCase(prop);
      this.style[camelProp] = val;
    });
  } 
  // 情况2：传入单个属性和值
  else {
    const camelProp = toCamelCase(property);
    this.style[camelProp] = value;
  }
};

优化后的使用示例 #

// 批量设置多个样式
targetElement.setStyle({
  display: 'block',
  'font-size': '20px', // 支持CSS原生短横线命名
  backgroundColor: '#f5f5f5', // 也支持驼峰命名
  padding: '10px 15px'
});

// 单个样式设置（兼容短横线）
targetElement.setStyle('margin-top', '20px');

注意事项 #

• 扩展原生对象原型虽然方便，但如果你的项目中引入了其他第三方库，可能存在命名冲突的风险，建议在自己可控的项目环境中使用。
• 该方法设置的是元素的内联样式，优先级会高于外部样式表中的样式（除非外部样式使用了!important）。

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