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

问题

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?

回答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.

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

来源：https://stackoverflow.com/questions/6306813/how-to-set-overflow-x-with-jquery-or-how-to-set-css-properties-with-a-das