javascript - 两个 Css 文件具有相同的类 - 从特定类中删除类，如何？

Question

我在 html 页面中调用两个具有相同类名但不同属性的 css 文件。

第一个 CSS 文件

.text {
  font-family: verdana;
  font-size: 11px;
  color: #000000;
  text-decoration: none;
  line-height: 20px;
}

第二个 CSS 文件

.text{
  margin: 0px;
  font: 13px/20px Arial,Helvetica,sans-serif;
  padding: 20px 20px 40px 35px;
}

我想通过 Jquery 或 Javascript 从第二个 Css 文件中删除 .text 的功能....

Answer 1

如评论中所述，加载不需要的 CSS 规则以始终禁用它们并应用新规则以与另一个现有规则相同是一种非常糟糕的做法。如果你真的不想或不能用其他方式来做，比如修改现有的 CSS 或添加新的 CSS 规则，你可以用 jQuery 来做:

使用 jQuery:

$(document).ready(function() {

    $('.text').css({'font-family':'verdana', 'font-size':'11px', 'padding':'0', 'margin':'0'});

});

演示: https://jsfiddle.net/chimos/6g9xmxxo/

• 所以在这里它给 padding 和 margin 默认值(如果你想让 .text 使用其他值作为边距，这可能会很成问题并在某些时候进行填充)。
• 并且 font-family 和 font-size 被定义为第一个 CSS 规则(这对于维护来说可能是非常有问题的，因为你有重复的代码并且你 -或编辑/维护人员 - 需要始终记住这一点以保持工作正常进行)。