如何使用JavaScript修改CSS类？

Question

我知道如何在单个标签上应用css(或改变它上面的类),但这不是我要求的!

我想修改CSS类中的属性而不触及应用类的元素.

换句话说,如果这是css

.myclass {
  font-size: 14px;
  color: #aab5f0;
}

这是html

<span id="test" class="myclass"> foo bar </span>

增加span标签的字体我想修改类的内容而不是做类似的事情

var fontsize = parseInt($('#test').css('font-size').replace(/[^-\d\.]/g, ''));
fontsize += 10;
$('#test').css('font-size', fontsize+'px');

我希望课程成为

.myclass {
      font-size: 18px;
      color: #aab5f0;
    } 

有没有办法通过Javascript更改实际的类？

我的另一个解决方案是将css放入一个容器中,每次都重新装满容器,但我感觉这不是一个好主意......

Answer 1

我认为理想情况下你应该在htmlor body元素上定义一个基本字体大小.CSS中的所有其他字体大小应该相对于"主"字体大小,如下所示:

body {
    font-size: 12px;
}

[everything else] {
    font-size: 1.0em;
}

然后,当您通过jQuery.css()调整正文的字体大小时,其他元素将自动调整它们相对于父级的大小.

$(body).css('font-size', '14px');

您不必使用body关卡,您可以将基本字体大小定义为div或其他容器,并将其用作父级.

有这种技术的工作示例在这里.