添加className后CSS样式未显示，表单交互样式问题求助

嘿，我来帮你搞定这两个问题：类明明加上了但CSS不生效，还有表单交互时移除特定box-shadow的需求。

一、先修正你原生JS的代码错误 #

你写的name.classList.add += " error";是错的！classList.add是个方法，不是可以直接赋值的属性，正确的写法应该是这样：

// 尽量别用name当变量名，它是全局对象的属性，容易冲突
var nameInput = document.getElementById("name");
nameInput.classList.add("error");

你用jQuery的$("#name").addClass("error");本身是没问题的，但如果类已经出现在DOM里了样式却没生效，大概率是CSS优先级在搞鬼。

二、解决CSS样式不生效的核心原因 #

如果元素的class列表里已经有error了，但样式没生效，基本是因为你的.error类样式被更高优先级的选择器给覆盖了。举个例子：

• 你原来给输入框写的样式是：#name { box-shadow: 0 0 5px #2196F3; }
• 而你的错误类样式是：.error { box-shadow: 0 0 5px #F44336; }

ID选择器的优先级比类选择器高，所以.error的阴影样式会被原样式覆盖。解决办法有两个：

1. 提高.error类的优先级（推荐）：把选择器和元素/ID结合起来写

/* 结合ID和类，优先级足够高 */
#name.error {
  box-shadow: 0 0 5px #F44336;
}
/* 或者结合元素标签和类 */
input.error {
  box-shadow: 0 0 5px #F44336;
}

2. 用!important强制生效（应急用，不推荐滥用）：

.error {
  box-shadow: 0 0 5px #F44336 !important;
}

三、实现表单交互时移除特定box-shadow #

接下来处理你第二个需求：当用户点击、选择或输入时，移除目标元素的错误阴影。我们用类来控制样式，交互时移除error类就好：

原生JS版本 #

var nameInput = document.getElementById("name");
var submitBtn = document.querySelector('button[type="submit"]');

// 提交按钮点击时添加error类
submitBtn.addEventListener('click', function(e) {
  e.preventDefault(); // 先阻止默认提交，方便测试效果
  nameInput.classList.add("error");
});

// 绑定交互事件，移除error类
nameInput.addEventListener('focus', function() {
  this.classList.remove("error");
});
nameInput.addEventListener('input', function() {
  this.classList.remove("error");
});
nameInput.addEventListener('click', function() {
  this.classList.remove("error");
});

jQuery版本 #

$('button[type="submit"]').click(function(e) {
  e.preventDefault();
  $("#name").addClass("error");
});

// 一次性绑定多个事件，移除error类
$("#name").on('focus input click', function() {
  $(this).removeClass("error");
});

最后再检查两个点 #

1. 确认你的CSS文件已经正确引入页面，没有路径错误
2. 打开浏览器控制台（F12），查看元素的Styles面板：如果.error的样式被划掉了，那肯定是优先级问题，按上面的方法调整就行

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