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

Question

I want to allow the user to change the font-size of the entire webpage.我想允许用户更改整个网页的font-size 。

I have set the font-size in rem and I am trying to change the font-size of the root so that it reflects for all the elements.我已经在 rem 中设置了字体大小，我正在尝试更改根的字体大小，以便它反映所有元素。

My markup-我的标记-

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

CODE-代码-

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

CSS- CSS-

 p{
    font-size: 2rem;
  }

  span{
    font-size: 0.5rem;
  }

The code is not reflecting anything.该代码没有反映任何内容。 What am I missing here?我在这里缺少什么？

Answer 1

jQuery doesn't always recognize !important . jQuery 并不总是识别!important 。 Remove !important and it should work.删除!important它应该可以工作。

How to apply !important using .css()? 如何使用 .css() 应用 !important？

 $('#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>

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-10-14 04:03:54

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-10-14 04:03:54

解决方案1
3 已采纳 2020-10-14 04:03:54