如何简化原生JavaScript中多元素style属性赋值代码？

完全懂你的痛点！处理一堆style属性时，写满element.style.xxx = yyy的代码确实冗长又杂乱，链式调用能让代码结构清爽太多。下面给你几个无依赖的纯JS实现方案，轻量又实用：

方案1：封装轻量链式操作工具函数 #

这个方案不会污染原生原型，完全自定义可控，适合大多数场景：

function $el(element) {
  // 支持传入选择器字符串或直接传入DOM元素
  const targetEl = typeof element === 'string' 
    ? document.querySelector(element) 
    : element;

  return {
    // 单个样式设置
    css(prop, value) {
      targetEl.style[prop] = value;
      return this; // 返回自身实现链式调用
    },
    // 批量样式设置（传对象）
    cssBatch(styles) {
      Object.assign(targetEl.style, styles);
      return this;
    },
    // 按需扩展其他常用DOM方法，比如添加类
    addClass(className) {
      targetEl.classList.add(className);
      return this;
    },
    // 获取原始DOM元素
    getEl() {
      return targetEl;
    }
  };
}

// 使用示例
$el('#myCard')
  .css('color', '#2c3e50')
  .css('borderRadius', '8px')
  .cssBatch({
    padding: '16px',
    backgroundColor: '#f8f9fa',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
  })
  .addClass('hover-effect');

这个工具函数可以根据你的需求自由扩展，比如添加removeClass、attr、on（绑定事件）等方法，把常用DOM操作都变成链式调用。

方案2：扩展Element原型（接近jQuery写法） #

如果是个人项目或可控环境，直接给原生元素原型加方法，写法会更贴近jQuery：

// 给所有DOM元素添加链式css方法
Element.prototype.css = function(prop, value) {
  // 支持两种调用方式：单个属性/值，或批量传对象
  if (typeof prop === 'object') {
    Object.assign(this.style, prop);
  } else {
    this.style[prop] = value;
  }
  return this;
};

// 使用示例
document.querySelector('#myButton')
  .css('backgroundColor', '#3498db')
  .css('color', '#fff')
  .css({
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  });

⚠️ 注意：这种方式会修改原生Element原型，若项目中有其他第三方脚本，可能存在冲突风险，大型团队项目不建议使用。

额外小技巧：纯批量样式设置（非链式但简洁） #

如果只是单纯批量设置样式，不需要链式操作，直接用Object.assign也能简化代码：

const myEl = document.querySelector('#myBox');
Object.assign(myEl.style, {
  width: '200px',
  height: '200px',
  border: '1px solid #eee',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
});

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