CODEWITHSUNDEEP
javascriptjquery
codeBug 07
codeBug 07

Reputation: 73

Change font size of all the text elements inside body

I want to allow the user to change the font-size of the entire webpage.

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.

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-

 p{
    font-size: 2rem;
  }

  span{
    font-size: 0.5rem;
  }

The code is not reflecting anything. What am I missing here?

Upvotes: 3

Views: 1093

Answers (1)

kmoser
kmoser

Reputation: 9273

jQuery doesn't always recognize !important. Remove !important and it should work.

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>

Upvotes: 3

Related Questions