如何在JavaScript中缩短同一对象多属性访问代码？有无其他方案？

变量别名（比如用e代替element）确实是个简单直接的方法，但针对你想减少重复书写element.style的需求，还有不少更灵活的方案，下面是几个常用的：

1. 批量设置样式：Object.assign 或 cssText #

如果你要设置多个样式属性，直接批量赋值会比逐个写更高效：

用 Object.assign 给 style 对象批量赋值 #

const element = document.createElement('div');
element.id = 'element';
// 一次性把所有样式属性合并到style对象里
Object.assign(element.style, {
  position: 'absolute',
  width: '100%',
  height: '100%',
  left: '0',
  top: '0',
  zIndex: '10000'
});

用 cssText 直接写入样式字符串 #

这种方式更接近CSS原生写法，适合样式较多的场景：

const element = document.createElement('div');
element.id = 'element';
element.style.cssText = `
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10000;
`;

注意：cssText会覆盖元素原有的内联样式，如果之前已经设置过样式要谨慎使用。

2. 解构赋值提取 style 对象 #

和变量别名思路类似，但更精准地提取你需要重复使用的style属性，代码可读性更强：

const element = document.createElement('div');
element.id = 'element';
// 把element.style解构出来单独使用
const { style } = element;
style.position = 'absolute';
style.width = '100%';
style.height = '100%';
style.left = '0';
style.top = '0';
style.zIndex = '10000';

3. 封装工具函数创建元素 #

如果经常需要创建这类带有固定属性的元素，可以写个工具函数封装整个创建过程，下次直接调用即可：

function createStyledElement(tag, config) {
  const element = document.createElement(tag);
  // 处理id
  if (config.id) element.id = config.id;
  // 处理样式
  if (config.style) Object.assign(element.style, config.style);
  // 还可以扩展处理class、textContent等其他属性
  return element;
}

// 使用的时候一行搞定
const element = createStyledElement('div', {
  id: 'element',
  style: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    left: '0',
    top: '0',
    zIndex: '10000'
  }
});

4. 自定义链式调用方法（类似C#的写法） #

如果你特别喜欢链式调用的风格，可以给元素添加链式设置的方法（不过不建议直接修改原生HTMLElement原型，避免冲突，这里用包装函数实现）：

function chainableElement(element) {
  return {
    setId(id) {
      element.id = id;
      return this;
    },
    setStyle(prop, value) {
      element.style[prop] = value;
      return this;
    },
    getElement() {
      return element;
    }
  };
}

// 使用链式调用
const element = chainableElement(document.createElement('div'))
  .setId('element')
  .setStyle('position', 'absolute')
  .setStyle('width', '100%')
  .setStyle('height', '100%')
  .setStyle('left', '0')
  .setStyle('top', '0')
  .setStyle('zIndex', '10000')
  .getElement();

这种写法完全贴合你想要的链式风格，而且不会污染原生原型。

总结一下：如果只是偶尔写一次，变量别名或解构style就足够；如果样式较多，Object.assign或cssText更高效；如果经常创建类似元素，工具函数会更省心；链式调用则适合追求代码风格一致性的场景。

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