javascript - 如何使用 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');

我希望类(class)变成

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

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

我的另一个解决方案是将 css 放入容器中并每次重新填充容器，但我感觉这不是一个好主意......

Answer 1

我认为理想情况下，您应该在 html 或 body 元素上定义基本字体大小。 CSS 中的所有其他字体大小都应该相对于该“主”字体大小，如下所示:

然后，当您通过 jQuery.css() 调整 body 的字体大小时，其他元素将自动调整其相对于父元素的大小。

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

您不必使用 body 级别，您可以将 base font-size 定义为 div 或其他容器，并将其用作父容器。

这是一个人为的例子:

$('#grow').click(function() {
  $('body').css('font-size', '18px');
});

body {
  font-size: 12px;
}

h3,
p {
  font-size: 1.0em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Main Title</h3>
<p> Welcome to my website. </p>

<button id="grow" type="button">Grow</button>