Как установить переполнение-x с помощью jQuery? Или: как установить css-свойства с помощью '-' (тире)?

Я хотел бы установить свойство overflow-x css с помощью jQuery, но он не работает:

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

Как бы установить свойства, в которых есть '-' (тире)?

Ответ 1

Вы можете использовать любой верблюд-футляр:

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

Или цитируемые ключи:

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

Я бы рекомендовал цитированные ключи, мне легче сказать "с первого взгляда", что такое правило сравнивается с верблюжьим корпусом.

Ответ 2

Вы можете процитировать его (с одинарными или двойными кавычками) или использовать вариант варианта верблюда (который DOM принял с его объектом style, потому что - не являются законными в идентификаторах).

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