Increase font size with jquery

Question

I'm attempting to run a split test with Optimizely and need to increase the size of the font that is used as description text in my site search's search field.

I've managed to change the color using this code:

$("input[value]").css({"color":"#cc0000"});

But if I add on font-size to this nothing happens? i.e.

$("input[value]").css({"color":"#cc0000", "font-size" : "1.9rem"});

I've also tried the following but it still doesn't seem to work??

$("input").css({"font-size" : "1.9rem"});

did you try inspecting to see if there is some rule sets a `font-size` as `!important` ? — rrk, Jul 27 '15 at 11:40
This works just fine. May be your browser doesn't support `rem` unit. Which browser you're using? — Bhojendra Rauniyar, Jul 27 '15 at 11:41
@Bhojendra Nepal Hmm weird, I'm using Google Chrome browser. — bbacarat, Jul 27 '15 at 11:54
@RejithRKrishnan Yes there is an !important statement in the .css file. But I've tried adding this to my jquery and it doesn't work? — bbacarat, Jul 27 '15 at 11:54

rrk · Accepted Answer · 2015-07-27T12:05:51.243

4

It looks like you have !important over riding the changes made using .css() function. So do the following.

$("input")
    .css({
        'cssText':'font-size:1.9rem !important',
        'color':'#cc0000'
    });

DEMO

edited Jul 27 '15 at 12:05

answered Jul 27 '15 at 12:00

rrk

15,677
4
29
45

1

Thank you, this worked, however it did overwrite my font color change? – bbacarat Jul 27 '15 at 12:02
I just reorder the code so the color change comes next and this sorted it. – bbacarat Jul 27 '15 at 12:04
@bbacarat http://jsfiddle.net/rejithrkrishnan/d4wzk4kz/1/ I've made changes to the fiddle. Please take a look. – rrk Jul 27 '15 at 12:05

score 1 · Answer 2 · answered Jul 27 '15 at 11:41

Try do it like this:

var fontSize = parseInt($("input").css("font-size"));
fontSize = fontSize + 1 + "px";
$("input").css({'font-size':fontSize});

or

var fontSize = $('input').css('font-size').split('px')[0];

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

score 0 · Answer 3 · answered Jul 27 '15 at 11:43

I have provided a jsFiddle which will hopefully be the answer you are looking for

https://jsfiddle.net/07x2trL9/1/

Html

<input style="font-size:15px" class="big-font" type="text" />

Javascript/jQuery

$(function () {
    $('.big-font').css("font-size", "25px");
});

You simply target your input and change the size like so

score 0 · Answer 4 · answered Jul 27 '15 at 11:47

0

Is this just a typo? try

$("input").css({"font-size" : "1.9em"});

'em' instead of 'rem'

answered Jul 27 '15 at 11:47

Colm Ryan

1,208
2
14
12

@Colm Ryan, thanks for replying but this didn't change anything. – bbacarat Jul 27 '15 at 11:57
Maybe I've misunderstood the question, I set up a fiddle here https://jsfiddle.net/gajy3x3k/1/ and I definitely see the text size change. Also I was completely wrong about 'rem', though it may not work with all browsers. – Colm Ryan Jul 27 '15 at 12:07

Increase font size with jquery

4 Answers4