如何覆盖或移除element.style，解决hideMenu函数样式被覆盖失效问题

问题根因 #

通过element.style直接赋值样式属性时，不支持拼接!important关键字，你的写法属于非法赋值，浏览器会直接忽略该样式设置，并非是已有样式覆盖导致的问题。

解决方法 #

方法1：使用标准API设置带!important的行内样式 #

如果确实需要给行内样式加!important，改用setProperty方法实现：

function hideMenu() {
  navLinks.style.setProperty('right', '-200px', 'important');
  console.log("Hide");
}

方法2：改用CSS类切换（更推荐） #

直接操作行内样式容易出现优先级冲突，且不利于维护，更建议通过切换类名实现状态变更，还能天然兼容过渡效果：

1. 先补全CSS样式

/* 你的菜单默认样式 */
.nav-links {
  right: -200px;
  transition: right 0.3s ease; /* 替换成你需要的过渡时长和曲线 */
  /* 其余原有样式保留 */
}
/* 菜单展开的状态类 */
.nav-links.show {
  right: 0;
}

2. 修改JS逻辑为类名切换

function showMenu() {
  navLinks.classList.add('show');
  console.log("Show");
}

function hideMenu() {
  navLinks.classList.remove('show');
  console.log("Hide");
}

方法3：清空已有的行内样式设置 #

如果需要清除之前通过JS设置的行内right属性，可以调用removeProperty方法：

navLinks.style.removeProperty('right');

清空后样式优先级会回退到CSS样式表中定义的规则。

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