Geek Answers Handbook

Change CSS on the fly with jquery

I read a bunch of answers to similar queries for dynamic styling, but I still have a few questions.

My end result is that there are 2 buttons on my page, which allows the user to increase or decrease the font size. I saw it around, and it seems that it should not be difficult ...

My C # project uses .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 collection of elements to contain DOM elements that have CSS font-size property. I would like to take the current size and apply some multiplier to it. In this case, to make it really obvious, I multiplied the current value by 6. This code is inside the function called by pressing the button. Using a simple warning window in this function, the click works. This code does not work.

Do I need to use '[class]' to create my collection, or is there a way to cut out CSS classes that contain a font?

Is this something that needs to be done on every page, or will the css value be cached somewhere?

Is there an easier way to do this? I do not want to have 3 different stylesheets if this is not needed. Thank you for your help!

+4
4

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');
});

1, , @kasper-taeymans, small big jQuery addClass() removeClass(), .

2, LESS, LESS- ( less.js), , : ( ) LESS CSS?

+3

. , (re) . , - ...

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);
    }

});

: ( )

+2

:

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

0
source

Here's a potential solution (and here's 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'
                 }) 
            }
        }

}
0
source

More articles:


All Articles