Як визначити кілька атрибутів CSS у jQuery?

Чи є синтаксичний спосіб у 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 вони потрібні через дефіс в імені.

Краще просто використовувати, .addClass()навіть якщо у вас є 1 і більше. Більш ремонтабельний і читабельний.

Якщо у вас дійсно є потреба зробити декілька властивостей CSS, тоді використовуйте наступне:

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

NB!
Будь-які властивості CSS із дефісом потрібно цитувати.
Я розмістив лапки, тому нікому не потрібно буде уточнювати це, і код буде на 100% функціональним.

Передайте його як об'єкт:

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

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

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

Використовуючи звичайний об’єкт, ви можете з’єднати рядки, що представляють назви властивостей, з відповідними їм значеннями. Наприклад, змінити колір тла та зробити текст сміливішим, виглядатиме так:

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

Крім того, ви також можете використовувати імена властивостей JavaScript:

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

Більше інформації можна знайти в документації jQuery .

будь ласка, спробуйте це,

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

Ви також можете використовувати attrразом із style:

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

Погодьтеся з червоним квадратом, проте варто згадати, що якщо у вас є властивість у двох словах, text-alignви б це зробили:

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

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

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

Джерело: Як: jQuery Додайте CSS та видаліть CSS

Спробуйте це

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

Сценарій

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

Html

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

Ви можете спробувати це

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

Кращий спосіб використання змінної

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

якщо ви хочете змінити кілька атрибутів 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;
}