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

Question

Есть ли в jQuery какой-либо синтаксический способ определить несколько атрибутов CSS, не вычеркивая все вправо, как это:

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

Если у вас, скажем, 20 из них, ваш код станет трудным для чтения, какие-либо решения?

Например, из API jQuery jQuery понимает и возвращает правильное значение для обоих

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

и

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

Обратите внимание, что в нотации DOM кавычки вокруг имен свойств необязательны , но в нотации CSS они обязательны из-за дефиса в имени.

Answer 1

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

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

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

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

Answer 2

передайте ему объект json:

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

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

Answer 3

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

Answer 4

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

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

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

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

Источник: Как: jQuery Добавить CSS и удалить CSS

Answer 9

Попробуйте это

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

Answer 10

попробуйте это:

$ (IDname) .css ({ "Фон": "# 000", "Цвет": "# 000" })

То есть привет в id в div.

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