JQuery में कई सीएसएस विशेषताओं को कैसे परिभाषित करें?

Question

क्या इस तरह से सब कुछ स्ट्रिंग के बिना कई सीएसएस विशेषताओं को परिभाषित करने के लिए jQuery में कोई वाक्यात्मक तरीका है:

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

यदि आप कहें, तो इनमें से 20 कोड को पढ़ना मुश्किल हो जाएगा, कोई समाधान?

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({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

नायब!
एक हाइफ़न के साथ किसी भी सीएसएस गुणों को उद्धृत करने की आवश्यकता है।
मैंने उद्धरण दिए हैं इसलिए किसी को भी स्पष्ट करने की आवश्यकता नहीं होगी, और कोड 100% कार्यात्मक होगा।

Comments

यह वास्तव में गलत है - गुणों को उनके साथ-साथ मूल्यों के बारे में उद्धरण की आवश्यकता है। देखिए डेव मांकॉफ का जवाब।

— rlb.usa

@ rlb.usa वास्तव में यह गलत नहीं है, उपरोक्त कार्य jsfiddle.net/ERkXP । Downvote के लिए धन्यवाद!

— ११'११ को

क्यों पृथ्वी पर प्रस्ताव और भी इस तरह के गैर-मानक वाक्यविन्यास के लिए तर्क! बस '-' के साथ एक शैली जोड़ें font-size, और यह विफल हो जाता है। यदि यह साबित सीमाओं के बारे में है, तो $('div').css({ width : 300, height: 40 }); वैध भी हैं।

— स्वतंत्र

यदि CSS प्रॉपर्टी में डैश कैरेक्टर (यानी टेक्स्ट-ओवरफ्लो) है तो आपको प्रॉपर्टी के आसपास कोट्स लगाने की जरूरत है। यही rlb.usa और जोनास मुझे लगता है के बारे में बात कर रहे हैं।

— दान

@redsquare कृपया अपने उत्तर में निम्नलिखित को जोड़ने पर विचार करें। से jQuery एपीआई :For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

— zanetu

Answer 2

इसे ऑब्जेक्ट के रूप में पास करें:

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

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

Comments

जावास्क्रिप्ट ऑब्जेक्ट, JSON नहीं।

— क्रिस

Answer 3

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

Comments

उस कार्य को करने के लिए आपको उस पर कुछ वाक्यविन्यास बदलना होगा: $ ('# संदेश')। css ({चौड़ाई: '550px', ऊँचाई: '300px', 'फ़ॉन्ट-आकार': '8pt'});

— एडवर्ड तुंगये

erm, सभी ड्राइव-डाउन डाउनवोटर्स के लिए धन्यवाद जो कभी jquery प्रलेखन नहीं पढ़ते हैं? संख्यात्मक मान पिक्सेल मूल्यों में स्वचालित रूप से kthx में परिवर्तित हो जाते हैं।

— जिमी

हाँ यहाँ क्या समस्या है? width: 550पूरी तरह से वैध है।

— rfunduk

मुझे लगता है कि आप fontSizeउद्धरण के बिना भी उपयोग कर सकते हैं ... मेरा सवाल यह है कि .... आप कैसे सेट करते हैं height, और width, हम कहते हैं ... समान मूल्य के लिए .... क्या यह होगा .css({ { width, height} : 300 })?

— एलेक्स ग्रे

@alexgray ऐसा करने का कोई प्रत्यक्ष तरीका नहीं है , लेकिन आप उन्हें प्रत्येक को एक ही चर में सेट कर सकते हैं:var x = 100; $el.css({width: x, height: x});

— 15:12 पर mankoff

Answer 4

एक सादा वस्तु का उपयोग करके, आप उन तारों को जोड़ सकते हैं जो अपने संबंधित मूल्यों के साथ संपत्ति के नाम का प्रतिनिधित्व करते हैं। उदाहरण के लिए, पृष्ठभूमि का रंग बदलना और पाठ फ़ोल्डर बनाना, इस तरह दिखेगा:

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

वैकल्पिक रूप से, आप जावास्क्रिप्ट संपत्ति के नामों का भी उपयोग कर सकते हैं:

$("#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

फिर से सहमत हों, लेकिन यह ध्यान देने योग्य है कि अगर आपके पास दो शब्द संपत्ति है जैसे 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({
    "background":"#000",
    "color":"#000"
})

एचटीएमएल

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

Answer 11

यू कैन ट्राई दिस

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

Comments

यह एक अच्छा दृष्टिकोण नहीं है दोस्त। इसके उपयोगकर्ता के प्रकार को भेजने के लिए बेहतर है

— Awais Qarni

Answer 12

चर का उपयोग करने का सबसे अच्छा तरीका

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

Answer 13

यदि आप कई सीएसएस विशेषताओं को बदलना चाहते हैं तो आपको नीचे दिए गए ऑब्जेक्ट संरचना का उपयोग करना होगा :

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

लेकिन यह तब और खराब हो जाता है जब हम बहुत सारी शैली बदलना चाहते हैं , इसलिए मैं आपको सुझाव देता हूं कि jQuery का उपयोग करके सीएसएस बदलने के बजाय एक वर्ग जोड़ रहा है, और एक वर्ग जोड़ना अधिक पठनीय भी है।

नीचे देखें उदाहरण:

सीएसएस

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

पूर्व के बाद के उदाहरण का एक फायदा यह है कि यदि आप कुछ सीएसएस जोड़ना चाहते हैं onclick चीज़ के चाहते हैं और दूसरे क्लिक पर उस सीएसएस को हटाना चाहते हैं तो बाद के उदाहरण में आप इसका उपयोग कर सकते हैं.toggleClass('custom-class')

जहां पूर्व उदाहरण में आपको विभिन्न मूल्यों के साथ सभी सीएसएस सेट करने होंगे जो आपने पहले निर्धारित किए हैं और यह जटिल होगा, इसलिए कक्षा विकल्प का उपयोग करना बेहतर समाधान होगा।

Answer 14

आप उपयोग कर सकते हैं

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

सबसे अच्छा तरीका $ ('चयनकर्ता') का उपयोग करना है। एडक्लास ('कस्टम-क्लास') और

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