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?

Answer 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.