Modifying CSS on the fly using jquery

Question

I've read a bunch of the answers to similar requests for dynamic styling, but I still have a few questions.

My final result is to have 2 buttons on my page that allows a user to increase or decrease the font size. I've seen this around, and it doesn't seem that it should be that complicated...

My C# project is using .less, and jquery 1.10.1.

var items = $('[class]').css('font-size');

$(items).each(function(index){        
    alert('Text:' + $(this).text());        
    $(this).css('font-size') =($(this).css('font-size').val() * 6) ;         
});

I expect the items collection will contain DOM elements that have font-size CSS property. I'd like to take the current size and apply some multiplier to it. In this case, to make it really obvious I was multiplying the current value by 6. This code is within a function that's called from a button click. With a simply alert box within this function the click works. This code doesn't work.

Do I want to use '[class]' to create my collection or is there a slicker way to pull css classes that contain font-size?

Is this something that is going to have to be done on each page, or does the css value get cached somewhere?

Is there an easier way to do this? I don't want to have 3 different style sheets, if it's not needed. Thanks for your help!

`.val()` is for getting the value of an input element. Why are you using it here? — Barmar, Dec 26 '13 at 23:04
And to change CSS with jquery, you call `.css()` with two arguments, you don't use an assignment. — Barmar, Dec 26 '13 at 23:05
Don't forget that sizes include a suffix like `px`, `em`, etc. You need to split that off before multiplying the size. — Barmar, Dec 26 '13 at 23:06
Your assignment of `items` doesn't find all elements that have `font-size` in their CSS. It finds all items that have any class assigned to them, and then returns the font-size of the first one. — Barmar, Dec 26 '13 at 23:07
Seems like you really need to review how jQuery works, these errors imply lots of misunderstandings. — Barmar, Dec 26 '13 at 23:07
To find everything with a font-size property, it would be `$('[style*=font-size]')`. — Barmar, Dec 26 '13 at 23:09
`cached`= no. javascript doesn't retain state between pages. Sounds like simply have page design problems — charlietfl, Dec 26 '13 at 23:15

score 3 · Answer 1 · edited May 23 '17 at 12:23

3

html:

<p style="font-size: 6px">test</p>
<p style="font-size: 6em">test</p>
<button id="resize">resize</button>

javascript:

$('#resize').click(
function(){
var fonts = $('[style*="font-size"]').each(function() {
    $(this).css('font-size',(parseFloat($(this).css('font-size'))*6)+'px');
});

Note 1 if you could use classes as suggested by @kasper-taeymans consider to make small and big classes and apply jQuery's addClass() and removeClass() to change your classes on the click events.

Note 2 cause you mention using LESS, if you compile your LESS code client side (by including less.js), which you shouldn't do, also read: Changing variable dynamically (at runtime) via LESS and CSS?

edited May 23 '17 at 12:23

Community

1
1

answered Dec 26 '13 at 23:41

Bass Jobsen

48,736
16
143
224

yes that (note 1: switch class on click) will be the best/fastest solution. – kasper Taeymans Dec 26 '13 at 23:51
What's the best method to retain this font size addClass() across pages? Something easy, or would I need to involve more code? I'm using MVC and I could us js to modify a hidden field with the font size (small, medium, big, or gigantor supreme). When a new page is loaded I could check the model and dynamically associate the css class. Thoughts? – RichieMN Dec 27 '13 at 16:44

kasper Taeymans · Answer 2 · 2013-12-26T23:42:41.223

There is no need to loop explicit through the items. Its enough to (re)set the class' font-size value. For example you could do something like this...

http://jsfiddle.net/kasperfish/5bdbQ/5/

var maxsize=24;
var minsize=6;

$('#sizeup').on('click', function(){
    var el=$('.adjustablefontsize');
    var currentsize=parseInt(el.css('font-size'));
    if(currentsize<maxsize){
        el.css('font-size',currentsize+4);
    }


});

$('#sizedown').on('click', function(){
    var el=$('.adjustablefontsize');
    var currentsize=parseInt(el.css('font-size'));
    if(currentsize>minsize){
        el.css('font-size',currentsize-4);
    }

});

edit: updated my answer (set minimum and maximum allowed font-size)

Would like to mention that it is better to add classes (smallest, small, normal, big,...) to your css file and then toggle between these classes on button click. like suggested by Bass Jobsen. — kasper Taeymans, Dec 26 '13 at 23:56

score 0 · Answer 3 · answered Dec 26 '13 at 23:26

0

Use it like this:

$(this).css('font-size', ($(this).css('font-size') * 6) + 'px'));

answered Dec 26 '13 at 23:26

Talysson

1,363
1
9
13

Josh Beam · Answer 4 · 2013-12-27T00:18:55.507

Here's a potential solution (and here's the jsfiddle):

<button class="up">+</button>
<button class="down">-</button>

<div>Some text</div>
<div>Some more text</div>
<div>Even more text</div>


$('button.up').on('click',function() {
    changeFontSize('up',38,'div');
});

$('button.down').on('click',function() {
    changeFontSize('down',16,'div');
});


//using so many parameters for the sake of being able to potentially use this function on multiple elements with different min and max sizes

//the limit variable is either a lower or upper limit of size

function changeFontSize(x,lim,el) {
    var direction = x,
        limit = lim,
        currentSize = parseInt($(el).css('font-size'));

        if(direction === "up") {
            if(currentSize<limit) {
                 $(el).css({
                     'font-size':(currentSize+6)+'px'
                 })
            }
        } else if (direction === "down") {
            if(currentSize>limit) {
                 $(el).css({
                     'font-size':(currentSize-6)+'px'
                 }) 
            }
        }

}

Modifying CSS on the fly using jquery

4 Answers4