सवाल JQuery का उपयोग करके पाठ-संरेखण के लिए गतिशील रूप से शैली कैसे जोड़ें


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

वर्तमान में jQuery में आप कुछ ऐसा कर सकते हैं

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

लेकिन मुझे इस दृष्टिकोण के साथ पाठ-संरेखण को बदलने का एक अच्छा तरीका नहीं दिख रहा है।

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

मेरे पास ऐसा कुछ है

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

मेरी चौड़ाई समायोजन के ठीक बाद और जब मैं इसे फ़ायरबग में देखता हूं तो मुझे लगता है कि शैली पर केवल एक ही संपत्ति सेट है। कोई मदद?

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

वाह - इस सवाल के लिए बड़ी प्रतिक्रिया! हाथ में समस्या के आसपास थोड़ा और विस्तार:

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

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

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


76
2018-05-19 14:38


मूल




जवाब:


दस्तावेज दिखाता है कि आपके पास सही विचार है:

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

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

उदाहरण के लिए, यदि आपकी कक्षा myElementClass है

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

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


147
2018-05-19 14:49



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


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

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

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

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


41
2018-05-19 14:49





मैं आमतौर पर उपयोग करता हूं

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

उम्मीद है की वो मदद करदे


11
2018-05-19 15:33





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


2
2018-05-19 14:50



वेनिला जावास्क्रिप्ट डीओएम मैनिपुलेशन का उपयोग कर शैली को सेट करते समय यह केवल तभी होगा। jQuery सीएसएस () इसके बजाय वास्तविक सीएसएस कीवर्ड का उपयोग करता है। - garrow
उपयोग करते समय यह बहुत अच्छा काम करता है .css({multiple-styles}) - Cody Guldner


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

समाधान jquery की क्षमता का उपयोग करना है जंजीर और करो:

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

हालांकि दिलचस्प खोज।

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

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

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


2
2018-05-19 15:01





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


1
2018-05-19 14:46





सही है?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>

0
2017-09-09 17:31





<!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
2018-03-17 05:31





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

आप इस स्थान पर कक्षा का नाम और आईडी का उपयोग कर सकते हैं

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

या

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

0
2017-09-01 07:04