在JavaScript ES6中如何通过'this'修改元素的CSS属性？

当然可以通过this来修改元素样式啦，不过核心得注意**this的指向是否正确**——这也是很多人踩坑的地方，尤其是ES6箭头函数带来的变化。

先给你看能正常工作的场景 #

只要this指向的是你要操作的DOM元素，直接用this.style.xxx就能修改样式。比如常见的点击事件绑定场景：

假设你的HTML结构是这样：

<button class="menu-btn">展开子菜单</button>
<div class="submenu" style="display: none;">我是子菜单</div>

用普通函数写事件处理逻辑，this会自动指向触发事件的按钮：

function openSubmenu() {
  // 这里的this就是点击的button元素，直接改样式
  this.style.backgroundColor = '#eee';
  this.style.color = '#333';
  
  // 顺便把对应的子菜单显示出来
  const submenu = this.nextElementSibling;
  submenu.style.display = 'block';
}

// 绑定事件
document.querySelector('.menu-btn').addEventListener('click', openSubmenu);

或者直接在HTML里绑定onclick：

<button class="menu-btn" onclick="openSubmenu()">展开子菜单</button>

这时候openSubmenu里的this同样指向这个按钮，逻辑完全通用。

要避开的坑：箭头函数的this #

ES6的箭头函数没有自己的this，它会继承外层作用域的this（比如全局环境下就是window）。如果用箭头函数当事件处理函数，this就不是你要操作的DOM元素了，自然没法改样式：

// 错误示例！
document.querySelector('.menu-btn').addEventListener('click', () => {
  console.log(this); // 这里输出的是window，不是按钮
  this.style.backgroundColor = '#eee'; // 完全无效，甚至会报错
});

给你重构openSubmenu的ES6风格示例 #

如果想让代码更贴合ES6的写法，比如用解构、简洁的条件判断，同时保证this指向正确，可以这么写：

function openSubmenu() {
  // 解构出元素的style对象，写法更简洁
  const { style } = this;
  style.backgroundColor = '#f5f5f5';
  style.border = '1px solid #ddd';
  
  // 用三元表达式切换子菜单的显示状态
  const submenu = this.closest('.menu-container').querySelector('.submenu');
  submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
}

如果是在ES6类里写菜单逻辑，记得要么绑定this，要么用event.currentTarget来获取元素（更稳妥）：

class MenuHandler {
  constructor() {
    this.menuBtn = document.querySelector('.menu-btn');
    // 绑定事件，用箭头函数包裹，确保类方法里的this指向实例
    this.menuBtn.addEventListener('click', (e) => this.openSubmenu(e));
  }

  openSubmenu(e) {
    // 用e.currentTarget获取触发事件的元素，不用纠结this指向
    const targetBtn = e.currentTarget;
    targetBtn.style.backgroundColor = '#ccc';
    
    const submenu = targetBtn.nextElementSibling;
    submenu.style.display = 'block';
  }
}

// 实例化使用
new MenuHandler();

总的来说，ES6完全支持用this修改元素样式，只要你把this的指向搞清楚，避开箭头函数的坑就没问题啦！

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