javascript - 更改正文中所有文本元素的字体大小

标签 javascript jquery

我想允许用户更改整个网页的font-size

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

我的标记-

<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;
  }

代码没有反射(reflect)任何东西。我在这里缺少什么?

最佳答案

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>

关于javascript - 更改正文中所有文本元素的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64339857/

相关文章:

javascript - jQuery/Javascript 通过对象属性索引到集合/映射中?

jquery - Chrome 中 jQuery fadeIn() 和 fadeOut() 的问题

javascript - div addClass 仅在一个 div 上

javascript - 使用 iframe 或 lightbox 在我的页面顶部堆叠另一个页面

javascript - 安装 Reanimated 2 后仍然收到警告 "If you want to use Reanimated 2 then..."

javascript - 如何使用谷歌图表在同一张图上绘制散点图和折线图

javascript - anchor 链接功能——onclick和href

javascript - 使用 javascript 或 jquery 将多个广告注入(inject)页面的有效方法是什么?

javascript - jQuery anchor 导航

jQuery Flot 图表顶部的数据/轴标签