Why can't I change the line-height CSS property using .css() in jQuery?

Question

I'm trying to change the line-height property with jQuery using this:

jQuery(document).ready(function () {
    var windowWidth = $(window).width();
    $('h1').css({
        'top': Math.floor(windowWidth * 0.0964) + 'px',
        'left': Math.floor(windowWidth * 0.0872) + 'px',
        'line-height': '0.9em !important'
    });
});

If I use the inspector and check the element style, I can see the top and left property but not the line-height, can someone explain to me what's wrong?

And here's the jsFiddle I made just to be sure I'm not crazy!
http://jsfiddle.net/p4DU6/4/

Tested it in FF, Chrome, IE8 and IE9

MMM · Accepted Answer · 2014-02-11T17:10:23.773

2

Don't use !important. There's no need for that.

It works for me if you remove that.

Your inline style will have higher specificity than anything else in your CSS anyway, so no need to use !important.

edited Feb 11 '14 at 17:10

answered Feb 11 '14 at 17:03

MMM

7,221
2
24
42

Beat me to it! This is the correct answer. Here's the working fiddle: http://jsfiddle.net/p4DU6/6/ – Patrick Moore Feb 11 '14 at 17:03
1

Do note that non-`!important` inline styles are overridden by `!important` stylesheet styles. – ajp15243 Feb 11 '14 at 17:08
If someone needs to use `!important` in inline styles, their code is an absolute mess. – MMM Feb 11 '14 at 17:09
As @ajp15243 said, I have a `!important` stylesheet style on the `h1` but I will create a new class to address this. – MacFerret Feb 11 '14 at 18:16

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

1

This is discussed here: How to apply !important using .css()?

The problem seems to be the !important statement. There is a bug report for jquery and a way to work around it, namely creating new classes and combining them:

http://bugs.jquery.com/ticket/11173

edited May 23 '17 at 12:13

Community

1
1

answered Feb 11 '14 at 17:07

George Georgovassilis

135
6

Why can't I change the line-height CSS property using .css() in jQuery?

2 Answers2