jQuery

2009-05-19 16 views
74

का उपयोग कर पाठ-संरेखण के लिए शैली को गतिशील रूप से जोड़ने के लिए कैसे करें मैं सीएसएस 2.1 के आसपास सामान्य आईई बग को सही करने की कोशिश कर रहा हूं और कस्टम टेक्स्ट-एलाइन शैली जोड़ने के लिए तत्वों की शैली गुणों को बदलने का एक तरीका चाहिए।jQuery

वर्तमान में jQuery में आप की तरह

$(this).width(or $(this).height( 

कुछ कर सकते हैं, लेकिन मैं यह एक ही दृष्टिकोण के साथ पाठ के अनुरूप परिवर्तन करने के लिए एक अच्छा तरीका खोजने के लिए प्रतीत नहीं कर सकते हैं।

आइटम में पहले से ही एक कक्षा है और मैं उस वर्ग में टेक्स्ट-एलाइन को बिना किसी किस्मत के सेट करता हूं। कक्षा के परिभाषित होने के बाद इस तत्व में केवल टेक्स्ट-एलाइन सीएसएस विशेषता जोड़ना संभव है?

मैं बस अपना चौड़ाई समायोजन के बाद और मैं फ़ायरबग मैं देख रहा हूँ केवल "चौड़ाई" में इस देखने के बाद इस

$(this).css("text-align", "center"); 

की तरह कुछ है केवल संपत्ति शैली पर सेट है। कोई मदद?

संपादित करें:

वाह - इस प्रश्न पर बड़ी प्रतिक्रिया! जिन्होंने उत्तर दिया है उन सभी को धन्यवाद! हाथ में समस्या को हल थोड़ा और अधिक विस्तार:

मैं jqGrid A3.5 के लिए जे एस स्रोत फेरबदल कर रहा हूँ कुछ कस्टम उप ग्रिड काम और वास्तविक जे एस मैं फेरबदल कर रहा हूँ करने के लिए "इस प्रयोग करने के लिए नीचे दिए गए (खेद दिखाया गया है "ऊपर मेरे उदाहरण में, लेकिन मैं संक्षिप्तता के लिए इस सरल रखने के लिए)

var subGridJson = function(sjxml, sbid) { 
        var tbl, trdiv, tddiv, result = "", i, cur, sgmap, 
        dummy = document.createElement("table"); 
        tbl = document.createElement("tbody"); 
        $(dummy).attr({ cellSpacing: "0", cellPadding: "0", border: "0" }); 
        trdiv = document.createElement("tr"); 
        for (i = 0; i < ts.p.subGridModel[0].name.length; i++) { 
         tddiv = document.createElement("th"); 
         tddiv.className = "ui-state-default ui-th-column"; 
         $(tddiv).html(ts.p.subGridModel[0].name[i]); 
         $(tddiv).width(ts.p.subGridModel[0].width[i]); 

         trdiv.appendChild(tddiv); 
        } 
        tbl.appendChild(trdiv); 

मैं कोई भाग्य के साथ नीचे (बशर्ते जवाब) से दोनों की कोशिश की है चाहता था।

$(tddiv).width(ts.p.subGridModel[0].width[i]).attr('style', 'text-align: center'); 

और

$(tddiv).width(ts.p.subGridModel[0].width[i]).css('text-align', 'center'); 

मैं आज इस मुद्दे पर काम करते हैं और किसी को भी इस अजीब समस्या के अपना दर्द महसूस करने के लिए एक अंतिम समाधान पोस्ट करने के लिए जारी रहेगा।

उत्तर

146

आप के रूप में प्रलेखन से पता चलता है, सही पता नहीं है?

उदाहरण के लिए, यदि आपका वर्ग myElementClass

$('.myElementClass').css('text-align','center'); 

इसके अलावा, मैं एक समय में Firebug के साथ काम नहीं किया है, लेकिन आप डोम में और नहीं एचटीएमएल देख रहे हैं? आपका स्रोत जावास्क्रिप्ट द्वारा नहीं बदला गया है, लेकिन डोम है। डोम टैब में देखें और देखें कि परिवर्तन लागू किया गया था या नहीं।

+1

यह काम करना चाहिए, लेकिन यह जब चौड़ाई के साथ मिलाकर प्रयोग असफल रहा है() पहले से स्थापित किया जा रहा। जवाब jquery चेनिंग का उपयोग करना है। – Steerpike

1

$(this).css("text-align", "center"); काम करना चाहिए, सुनिश्चित करें कि यह 'वह तत्व है जिसे आप वास्तव में पाठ-संरेखण शैली को सेट करने का प्रयास कर रहे हैं।

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

क्या आप वाकई सही ढंग से वर्ग या आईडी के साथ इस की पहचान कर रहे हैं कर रहे हैं:

40

तुम भी तत्व को एक इनलाइन शैली को जोड़ने के लिए निम्न को आज़मा सकते:

$(this).attr('style', 'text-align: center'); 

यह सुनिश्चित करें कि अन्य स्टाइल नियम अधिभावी नहीं कर रहे हैं कि तुम क्या सोचा था कि काम करेगा बनाना चाहिए। मुझे विश्वास है कि इनलाइन शैलियों को आम तौर पर प्राथमिकता मिलती है।

संपादित करें: इसके अलावा, एक और उपकरण है कि आप मदद कर सकते हैं Jash (http://www.billyreisinger.com/jash/) है। यह आपको जावास्क्रिप्ट कमांड प्रॉम्प्ट देता है ताकि आप सुनिश्चित कर सकें कि आप आसानी से जावास्क्रिप्ट स्टेटमेंट का परीक्षण कर सकते हैं और सुनिश्चित कर सकते हैं कि आप सही तत्व का चयन कर रहे हैं, आदि

2

मुझे लगता है कि आपको "टेक्स्ट-एलाइन" के बजाय "टेक्स्ट एलाइन" का उपयोग करना चाहिए।

+5

यह केवल तभी होगा जब वेनिला जावास्क्रिप्ट डीओएम मैनिपुलेशन का उपयोग करके शैली को सेट किया जाए। jQuery सीएसएस() इसके बजाय वास्तविक सीएसएस कीवर्ड का उपयोग करता है। – garrow

+1

'.css ({एकाधिक-शैलियों}) का उपयोग करते हुए यह बहुत अच्छा काम करता है ' –

2

दिलचस्प। जब मैंने एक टेस्ट वर्जन लिखा था तो मुझे वही समस्या मिली।

समाधान chain लिए jQuery की क्षमता का उपयोग करना है और कार्य करें:

$(this).width(500).css("text-align", "center"); 

दिलचस्प हालांकि पाते हैं।

थोड़ा विस्तार करने के लिए, निम्नलिखित नहीं करता है काम

$(this).width(500); 
$(this).css("text-align", "center"); 

और परिणाम केवल चौड़ाई में शैली पर स्थापित किया जा रहा। जैसा कि मैंने उपरोक्त सुझाव दिया है, दो को चेन करना, काम करता प्रतीत होता है।

10

मैं आमतौर पर

$(this).css({ 
    "textAlign":"center", 
    "secondCSSProperty":"value" 
}); 

आशा है कि मदद करता है

0

सही है का उपयोग करें?

<script> 
$("#box").one("click", function() { 
    $(this).css("width", "+=200"); 
}); 
</script> 
0
<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     $this = $('h1'); 
     $this.css('color','#3498db'); 
     $this.css('text-align','center'); 
     $this.css('border','1px solid #ededed'); 
     }); 
    </script> 

    </head> 
    <body> 
     <h1>Title</h1> 
</body> 
</html> 
0
$(this).css({'text-align':'center'}); 

आप इस

$('.classname').css({'text-align':'center'}); 

या

$('#id').css({'text-align':'center'}); 
-1

के स्थान पर नीचे लगता है में वर्ग के नाम और आईडी का उपयोग कर सकते हैं एचटीएमएल टैग पैरा है:

<p style="background-color:#ff0000">This is a paragraph.</p> 

और हम अनुच्छेद रंग jquery में बदलना चाहते हैं।

क्लाइंट पक्ष कोड होगा:

<script> 
$(document).ready(function(){ 
    $("p").css("background-color", "yellow"); 
}); 
</script> 
+0

क्या यह किसी भी तरह से दिए गए उत्तरों में सुधार करता है? –