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

407

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

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

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

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

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

и

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

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

Теги:

11 ответов

719
Лучший ответ

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

Если у вас действительно есть желание сделать несколько реквизитов css, используйте

NB Любые реквизиты css с дефисом должны быть указаны.

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

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

  • 1
    Также позволяет лучше разделить код.
  • 6
    как в более удобном и читабельном :)
Показать ещё 17 комментариев
148

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

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

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

  • 7
    Объект Javascript, а не JSON.
59
$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });
  • 3
    чтобы это работало, нужно изменить синтаксис: $ ('# message'). css ({ширина: '550px', высота: '300px', 'font-size': '8pt'});
  • 15
    эм, спасибо всем неопытным пользователям, которые никогда не читали документацию jquery? числовые значения автоматически преобразуются в значения пикселей kthx.
Показать ещё 4 комментария
29

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

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

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

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

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

15

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

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

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

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

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

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

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

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})
4
$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

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

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

4

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

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");
  • 1
    Это не очень хороший подход, чувак. Лучше отправить пользователю тип json
1

Лучший способ использования переменной

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню