Jak zdefiniować wiele atrybutów CSS w jQuery?

Czy w jQuery jest jakiś sposób na składnie, aby zdefiniować wiele atrybutów CSS bez ciągnięcia wszystkiego w prawo w następujący sposób:

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

Jeśli masz, powiedzmy, 20 z nich, twój kod będzie trudny do odczytania, jakieś rozwiązania?

Na przykład z jQuery API jQuery rozumie i zwraca poprawną wartość dla obu

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

i

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

Zauważ, że w notacji DOM znaki cudzysłowu wokół nazw właściwości są opcjonalne , ale w notacji CSS są wymagane ze względu na łącznik w nazwie.

Lepiej po prostu użyć, .addClass()nawet jeśli masz 1 lub więcej. Bardziej konserwowalny i czytelny.

Jeśli naprawdę masz ochotę zrobić wiele właściwości CSS, skorzystaj z następujących opcji:

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

NB!
Wszelkie właściwości CSS z łącznikiem muszą być cytowane.
Umieściłem cytaty, aby nikt nie musiał tego wyjaśniać, a kod będzie w 100% funkcjonalny.

Przekaż jako obiekt:

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

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

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

Za pomocą zwykłego obiektu można sparować ciągi znaków reprezentujące nazwy właściwości z odpowiadającymi im wartościami. Na przykład zmiana koloru tła i pogrubienie tekstu wyglądałoby następująco:

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

Alternatywnie możesz także użyć nazw właściwości JavaScript:

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

Więcej informacji można znaleźć w dokumentacji jQuery .

proszę spróbuj tego

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

Możesz także użyć attrwraz z style:

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

Zgadzam się z redsquare, jednak warto wspomnieć, że jeśli masz właściwość dwóch słów text-align, to zrobiłbyś to:

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

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

Ponadto może być lepiej użyć wbudowanego jQuery, addClassaby twój projekt był bardziej skalowalny.

Źródło: Porady: jQuery Dodaj CSS i Usuń CSS

Spróbuj tego

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

Scenariusz

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

HTML

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

Możesz tego spróbować

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

Najlepszy sposób na użycie zmiennej

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

jeśli chcesz zmienić wiele atrybutów css, musisz użyć struktury obiektu jak poniżej:

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

ale staje się gorzej, gdy chcemy zmienić wiele stylów , więc sugeruję wam dodanie klasy zamiast zmiany css za pomocą jQuery, a dodanie klasy jest również bardziej czytelne.

patrz przykład poniżej:

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');
});

Zaletą tego drugiego przykładu w porównaniu z poprzednim jest to, że jeśli chcesz dodać jakiś css onclickczegoś i chcesz usunąć ten css za drugim kliknięciem, to w drugim przykładzie możesz użyć.toggleClass('custom-class')

gdzie w poprzednim przykładzie musisz ustawić wszystkie css z różnymi wartościami, które ustawiłeś wcześniej i będzie to skomplikowane, więc użycie opcji klasy będzie lepszym rozwiązaniem.

Możesz użyć

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

Najlepszym sposobem jest użycie $ („selektor”). AddClass („klasa niestandardowa”) i

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