How to set overflow-x with jQuery? Or: How to set css-properties with a '-' (dash)?

Question

I would like to set the overflow-x css property with jQuery, but it doesn't work:

$('.mySelector').css({
    color: 'Red',
    overflow: 'auto',
    overflow-x: 'scroll'
});

How would I set properties that have a '-' (dash) in them?

Solution 1

You could use either camel-case:

$('.mySelector').css({
    color: 'Red',
    overflow: 'auto',
    overflowX: 'scroll'
});

Or quoted keys:

$('.mySelector').css({
    color: 'Red',
    overflow: 'auto',
    'overflow-x': 'scroll'
});

I would recommend quoted keys, I find it easier to tell 'at a glance' what a rule is compared to camel-casing.

Solution 2

You can quote it (with single or double quotes) or use the camel case variant (which the DOM adopted with its style object, because - are not legal in identifiers).

$('.mySelector').css({
    'color': 'Red',
    'overflow': 'auto',
    'overflow-x': 'scroll'
});

Comments

[Kees C. Bakker]

Could I set all '-' properties like this?

[Kees C. Bakker]

Could I set all '-' properties like this?

[Kees C. Bakker]

Can I combine non-quoted and quoted, like { color: 'Red', 'overflow-x': 'scroll' }?

[Kees C. Bakker]

Why did you edit your answer, your original answer with overflowX worked very good :-)

[Michael Robinson]

@Kess, sorry, I'm on a very slow connection and was in the middle of researching my answer in order to make sure it was as accurate as possible