更改正文中所有文本元素的字体大小答案

【问题标题】：Change font size of all the text elements inside body更改正文中所有文本元素的字体大小
【发布时间】：2020-10-14 15:31:32
【问题描述】：

我想让用户更改整个网页的font-size。

我已经在 rem 中设置了字体大小，我正在尝试更改根的字体大小，以便它反映所有元素。

我的标记-

<body >

        <div id="test-text">
        ALL TEXT
        </div>
        <p>sample text</p>
        <p>sample text2</p>
        <span>sample text3</span>
        <h1>tst4</h1>
        <label>label</label>
<button id="inc">inc</button>
</body>

代码-

$('#inc').click(function(){
    $('body').css('font-size','4rem !important');
})

CSS-

 p{
    font-size: 2rem;
  }

  span{
    font-size: 0.5rem;
  }

代码没有反映任何内容。我在这里错过了什么？

【问题讨论】：

您可以，可能，改为更改 css 类定义：stackoverflow.com/a/5891638/2181514
@freedomn-m 遗憾的是，我不能使用不同的样式表。
考虑以rem 为单位设置字体大小，而不是px。然后您需要做的就是更改html 元素的font-size，所有其他字体大小都将与此相关。
@HereticMonkey 嗨。我试过这个，但由于某种原因它不起作用。我已经更新了这个问题。你能告诉我我错过了什么吗？
无关，但你有一个额外的</div>。

标签： javascript jquery

【解决方案1】：

jQuery 并不总是能识别!important。删除!important，它应该可以工作。

How to apply !important using .css()?

$('#inc').click(function(){
    $('body').css('font-size','4rem');
})

p{
    font-size: 2rem;
}

span{
    font-size: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test-text">
    ALL TEXT
</div>
<p>sample text</p>
<p>sample text2</p>
<span>sample text3</span>
<h1>tst4</h1>
<label>label</label>

<button id="inc">inc</button>

【讨论】：

哇。不敢相信这么小的事情有时会花费几个小时来理解这个错误！谢谢哥们！ :D