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


81

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

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

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

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

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

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

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

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

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

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

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

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

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

जवाबों:


166

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

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

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

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

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

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


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

42

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

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

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

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


12

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

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

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


2

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


6
यह केवल मामला होगा यदि वेनिला जावास्क्रिप्ट डोम हेरफेर का उपयोग करके शैली सेट करें। jQuery सीएसएस () इसके बजाय वास्तविक सीएसएस कीवर्ड का उपयोग करता है।
मई'09

2

दिलचस्प। जब मुझे टेस्ट वर्जन लिखा गया तो मुझे भी यही समस्या हुई।

समाधान है जॉकरी की श्रृंखला और करने की क्षमता का उपयोग करना:

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

हालांकि दिलचस्प मिल।

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

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

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


1

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


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

मान लीजिए नीचे HTML पैराग्राफ टैग है:

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

और हम पैरा कलर को jquery में बदलना चाहते हैं।

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

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

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

-1
function add_question () {var count = document.getElementById ("nofquest"); मान var कंटेनर = document.getElementById ("कंटेनर"); // कंटेनर की पिछली सामग्री को साफ़ करें जबकि (container.hasChildNodes ()) {container.removeChild (container.lastChild); } के लिए (i = 1; i)

टेक्स्टबॉक्स का केंद्र कैसे सेट करें


1. स्वरूपण 2. क्या आप एक स्पष्टीकरण प्रदान कर सकते हैं?
jhpratt
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.