Как определить несколько атрибутов CSS в jQuery?

Лучше просто использовать .addClass() и .removeClass(), даже если вам нужно изменить 1 или несколько стилей. Он более удобен в обслуживании и удобочитаем.

Если у вас действительно есть желание сделать несколько свойств CSS, используйте следующее:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

NB!
Любые свойства CSS с дефис необходимо указывать. Я разместил кавычки, чтобы никто не уточнял, и код будет на 100% функциональным.

$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

Передайте его как объект:

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

Используя простой объект, вы можете объединить строки, представляющие имена свойств с соответствующими значениями. Например, изменение цвета фона и выделение текста более жирным будет выглядеть так:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

В качестве альтернативы вы также можете использовать имена свойств JavaScript:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

Более подробную информацию можно найти в документация jQuery.

Согласитесь с redsquare, однако стоит упомянуть, что если у вас есть свойство из двух слов, например text-align, вы должны сделать это:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

Вы можете попробовать это

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

пожалуйста, попробуйте это,

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

Вы также можете использовать attr вместе с style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );

Попробуй это

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

Кроме того, может быть лучше использовать jQuery, встроенный в addClass, чтобы сделать ваш проект более масштабируемым.

Источник: Как: добавить CSS и удалить CSS с помощью jQuery

Лучший способ - использовать переменную.

var style1 = {
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
};
$("#message").css(style1);

Сценарий

 $(IDname).css({
    "background":"#000",
    "color":"#000"
})

HTML

<div id = "hello"></div>

если вы хотите изменить несколько атрибутов css, вам необходимо использовать структуру объект, как показано ниже:

$(document).ready(function(){
   $('#message').css({
                   "background-color": "#0F0",
                   "color":"red",
                   "font-family":"verdana"
                });
});

но он получает худший, когда мы хотим менять много стиля, поэтому я предлагаю вам добавить класс вместо изменения css с помощью jQuery, и добавление класса также более читабельно.

см. пример ниже:

CSS

<style>
    .custom-class{
       font-weight: bold;
       background: #f5f5f5;
       text-align: center;
       font-size: 18px;
       color:red;
    }
</style>

jQuery

$(document).ready(function(){
   $('#message').addclass('custom-class');
});

Одним из преимуществ последнего примера над первым является то, что если вы хотите добавить какой-то css onclick чего-либо и хотите удалить этот css при втором щелчке, тогда в последнем примере вы можете использовать .toggleClass('custom-class')

где в предыдущем примере вы должны установить все css с разными значениями, которые вы установили ранее, и это будет сложно, поэтому использование параметра класса будет лучшим решением.

Ты можешь использовать

$('selector').css({'width:'16px', 'color': 'green', 'margin': '0'});

Лучше всего использовать $ ('selector'). AddClass ('custom-class') и

.custom-class{
width:16px,
color: green;
margin: 0;
}