CODEWITHSUNDEEP
jquery
Dazvolt
Dazvolt

Reputation: 697

Jquery - Get every style on page and add font size

Is it possible to find all styles on page, which are using font-size: **px style and set it be bigger or smaller depending of already defined font-size?

For example, there is a few blocks:

<div class="text1">Text1</div>
<div class="text2">Text2</div>

.text1 {
font-size: 12px;
}
.text2 {
font-size: 16px;
}

There is can be any amount of blocks and styles. Lets say we are setting function to get text bigger by 2px, so we will got font-size: 14px for .text1 and font-size: 18px for .text2

JSFiddle for fast editing: http://jsfiddle.net/8BbHP/

Upvotes: 0

Views: 49

Answers (1)

Bla...
Bla...

Reputation: 7288

I think you should use better class structure to make it easier to achieve your goal, like below:

<div class="text text1">Text1</div>
<div class="text text2">Text2</div>

.text1 {
font-size: 12px;
}
.text2 {
font-size: 16px;
}

By doing so, you can easily get all element with class text and change the font-size, like below:

$(".text").each(function(){
    var current_size = parseInt($(this).css("font-size"));
    $(this).css("font-size", current_size + 2 + "pt");
})

Here is my JSFiddle....

Upvotes: 1

Related Questions