JQuery'de birden çok CSS özniteliği nasıl tanımlanır?

JQuery'de, her şeyi şu şekilde sağa doğru dizmeden birden fazla CSS özniteliğini tanımlamanın herhangi bir sözdizimsel yolu var mı:

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

Bunlardan 20 tanesine sahipseniz, kodunuzu okumak zorlaşır, herhangi bir çözüm?

Örneğin, jQuery API'sinden, jQuery her ikisi için de doğru değeri anlar ve döndürür

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

ve

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

DOM gösterimi ile, özellik adlarının etrafındaki tırnak işaretlerinin isteğe bağlı olduğuna dikkat edin , ancak CSS gösterimi ile addaki kısa çizgi nedeniyle gereklidir .

.addClass()1 veya daha fazlasına sahipseniz bile kullanmak daha iyidir. Daha bakımlı ve okunabilir.

Gerçekten birden fazla CSS özelliği yapma isteğiniz varsa, aşağıdakileri kullanın:

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

NB! Kısa çizgi
içeren tüm CSS özelliklerinin alıntılanması gerekir. Hiç kimse açıklığa kavuşması gerekmeyecek şekilde tırnak koydum ve kod% 100 işlevsel olacak.

Nesne olarak iletin:

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

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

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

Düz bir nesne kullanarak, özellik adlarını temsil eden dizeleri karşılık gelen değerlerle eşleştirebilirsiniz. Örneğin, arka plan rengini değiştirmek ve metni daha kalın yapmak şöyle görünür:

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

Alternatif olarak, JavaScript özellik adlarını da kullanabilirsiniz:

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

Daha fazla bilgi jQuery'nin belgelerinde bulunabilir .

lütfen bunu dene,

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

Aşağıdakilerle attrbirlikte de kullanabilirsiniz style:

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

Redsquare ile aynı fikirde olmak, ancak sizin gibi iki kelimeli bir özelliğiniz varsa bunu yapmaktan bahsetmeye değer text-align:

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

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

Ayrıca, addClassprojenizi daha ölçeklenebilir hale getirmek için yerleşik jQuery'nin kullanılması daha iyi olabilir .

Kaynak: Nasıl Yapılır: jQuery CSS Ekleme ve CSS Kaldırma

Bunu dene

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

Senaryo

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

Html

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

Bunu Deneyebilirsiniz

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

Değişken kullanmanın en iyi yolu

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

birden çok css özniteliğini değiştirmek istiyorsanız nesne yapısını aşağıdaki gibi kullanmanız gerekir :

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

ama biz stil çok değiştirmek istediğinizde daha da kötüleştirir , bu yüzden size önerdiğim jQuery kullanarak css değiştirmek yerine bir sınıf eklemek ve bir sınıf eklemek çok daha okunabilir.

aşağıdaki örneğe bakın:

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

Önceki örneğe göre ikinci örneğin bir avantajı, bir onclickşeyden biraz css eklemek ve ikinci tıklamayla o css'yi kaldırmak istiyorsanız, daha sonra ikinci örnekte kullanabilirsiniz..toggleClass('custom-class')

önceki örnekte, tüm css'i daha önce ayarladığınız farklı değerlerle ayarlamanız gerekir ve bu karmaşık olacaktır, bu nedenle sınıf seçeneğini kullanmak daha iyi bir çözüm olacaktır.

Kullanabilirsiniz

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

En iyi yol $ ('selector') kullanmaktır. AddClass ('custom-class') ve

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