jQuery removeClass()方法无法移除div样式的问题及解决

你现在遇到的坑其实很常见——你混淆了jQuery里两个方法的核心作用：

• 你用.css()给元素设置的是行内样式（直接写在元素的style属性里），这种样式优先级极高，完全不受类名变化影响
• 而.removeClass()只是移除元素的类名，它根本碰不到已经存在的行内样式！所以你移除one类后，行内的背景色和文字颜色还牢牢粘在元素上，自然看不到样式恢复的效果

给你两种靠谱的方案，按需选择：

方案1：用CSS类管理样式（推荐！） #

这是前端开发的最佳实践——把样式写在CSS类里，而不是用.css()硬塞行内样式。这样移除类名就能直接让元素恢复默认样式：

<style>
.one {
  background-color: aqua;
  color: black;
}
.two {
  background-color: lightpink;
  color: black;
}
.three {
  background-color: lightgreen;
  color: black;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> 
<div class='one' id='firstId'> <p>Hello first div</p> </div> 
<div class='two' id='secondId'> <p>Hello second div</p> </div> 
<div class='three' id='thirdId'> <p>Hello third div</p> </div> 
<h1 style='color: green;'>You can remove color if you don't want</h1>

<script>
$(document).ready(function() { 
  // 这里不用再用.css()设置样式啦，CSS类已经搞定了
  $('div.one').click(function() { 
    $(this).removeClass('one'); // 用$(this)只操作当前点击的元素，更高效
  }); 
}); 
</script>

方案2：如果必须用行内样式，就主动清除行内样式 #

要是你因为特殊情况非得用.css()加行内样式，那点击时得主动清除这些行内样式：

方式A：一键清空所有行内样式 #

$(document).ready(function() { 
  $('div.one').css({ backgroundColor: 'aqua', color: 'black' }); 
  $('div.two').css({ backgroundColor: 'lightpink', color: 'black' }); 
  $('div.three').css({ backgroundColor: 'lightgreen', color: 'black' }); 
  
  $('div.one').click(function() { 
    $(this).removeAttr('style'); // 直接移除整个style属性，清空所有行内样式
  }); 
}); 

方式B：单独重置指定样式 #

如果你只想清除背景色和文字颜色，保留其他可能存在的行内样式，可以这么写：

$(document).ready(function() { 
  $('div.one').css({ backgroundColor: 'aqua', color: 'black' }); 
  $('div.two').css({ backgroundColor: 'lightpink', color: 'black' }); 
  $('div.three').css({ backgroundColor: 'lightgreen', color: 'black' }); 
  
  $('div.one').click(function() { 
    $(this).css({ 
      backgroundColor: '', // 重置为浏览器默认值
      color: '' 
    }); 
  }); 
}); 

• 尽量用CSS类管理样式，代码更整洁，后期改样式也不用动JS
• 点击事件里用$(this)代替$('div.one')，避免误操作页面上其他.one元素

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