如何用JavaScript为含!important的div添加ID以覆盖样式？

1. 用JavaScript给目标元素添加ID #

先通过类选择器找到对应的div元素，再给它设置ID属性。代码如下：

// 获取带hamburger-menu类的元素
const hamburgerMenu = document.querySelector('.hamburger-menu');
// 给元素添加ID
hamburgerMenu.id = 'custom-hamburger';

如果担心页面还没加载完就执行JS导致找不到元素，可以把代码放在DOMContentLoaded事件里，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  const hamburgerMenu = document.querySelector('.hamburger-menu');
  hamburgerMenu.id = 'custom-hamburger';
});

2. 用ID选择器编写覆盖样式 #

因为原样式带!important，所以新的ID选择器样式也需要加上!important才能彻底覆盖（ID选择器权重本身比类选择器高，但对方加了!important，我们也得加才能优先级胜出）。示例CSS：

#custom-hamburger {
  background-color: #ff4500 !important; /* 替换成你想要的颜色，这里是橙色 */
}

完整代码示例 #

HTML #

<div class="hamburger-menu">汉堡菜单</div>

CSS #

.hamburger-menu {
  background-color: white !important;
}

#custom-hamburger {
  background-color: #ff4500 !important;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const hamburgerMenu = document.querySelector('.hamburger-menu');
  hamburgerMenu.id = 'custom-hamburger';
});

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