CODEWITHSUNDEEP
javascriptcss
Muhammet Can TONBUL
Muhammet Can TONBUL

Reputation: 3538

How do I change all of the font sizes in a div?

First of all I apologize for my English. If the editors fix my mistakes, I'm happy.

Here my div and content. 

<div data-x="182" data-y="201" class="resize-drag" contenteditable="true" id="text-giris2"  style="width: 115px; height: 153px; transform: translate(182px, 201px); position: absolute; text-align: left; overflow: hidden; border: 1px solid black;">
    <u style="font-size: 15px;">asd</u>
    as a<b>sd</b>
    <span>a<span style="color: red; font-size: 18px;">s a</span>sdas a
    <span><span style="font-size: 18px;">sdasd 
    <span style="font-size: 26px;">addddddd</span></span></span></span>
    </div>

I want to dynamically change the sizes of all the font sizes in the div element with the unique name "text-input2". But what will happen in it is not clear. As above, tags like <span>, <u>, <b> can be similar. I want to take 2 times the size of all the fonts I want to do. As an example, I would like to have <span style = "font-size: 18px> after the <span style =" font-size: 36px> Similarly, <u style = "font-size: 15px;"> after the <u style = "font-size: 30px;"> Can such a thing be done using only CSS? If it is impossible, I will try to do with Javascript, but I did not know where to start. I am waiting for your help. Thank you.

Upvotes: 2

Views: 114

Answers (1)

Toby Mellor
Toby Mellor

Reputation: 8205

The code I've provided below will loop through all of the elements contained within the div with the id text-giris2. On each iteration, it will take the current font size and double it.

$('#text-giris2').children().css('font-size', function(i, current){
    return parseFloat(current) * 2;
});

An example

$('#container').children().css('font-size', function(i, current){
    console.log('New font size for ' + $(this).text() + ' is ' + parseFloat(current) * 2);
    return parseFloat(current) * 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <span style="font-size: 5px;">Hello</span>
    <p style="font-size: 7px;">World</p>
    <span>Foobar</span>
</div>

Upvotes: 2

Related Questions