如何通过类名同时移除两个CSS样式？

你想移除的这两个样式是定义在外部CSS里的，直接给元素style属性设null不顶用，得用规范的方式来清除或者覆盖。下面是几种可行的实现方式：

方式一：设置样式为初始值 #

直接把对应样式设回浏览器初始值，就能覆盖外部CSS的设置：

// 找到.he元素，清除display:flex
document.getElementsByClassName('he')[0].style.display = 'initial';
// 找到.he下面的.me元素，清除text-align:left
document.querySelector('.he .me').style.textAlign = 'initial';

方式二：用removeProperty清除样式 #

这是更标准的清除样式属性的方法：

const heEl = document.getElementsByClassName('he')[0];
heEl.style.removeProperty('display');

const meEl = heEl.querySelector('.me');
meEl.style.removeProperty('text-align');

为啥你之前的代码没效果？ #

• 你写的代码只改了color属性，和你要移除的display、text-align完全不沾边；
• 设置style.xxx = null不是规范的清除样式方式，正确操作是设为空字符串''、初始值，或者用removeProperty；
• .me是.he的子元素，得先找到父元素再定位子元素，或者直接用选择器'.he .me'获取。

另外，更推荐用新增CSS类的方式来覆盖样式，后续要恢复或者复用都更方便：

/* 在你的CSS里加这两个类 */
.he.no-flex {
  display: initial;
}
.me.no-left-align {
  text-align: initial;
}

// 给元素加类就能移除原有样式
document.querySelector('.he').classList.add('no-flex');
document.querySelector('.he .me').classList.add('no-left-align');

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