Wie man dynamisch einen Stil für Text-Align mit jQuery hinzufügt

Question

Ich versuche, die üblichen IE-Bugs rund um CSS 2.1 zu korrigieren und brauche eine Möglichkeit, eine Elementstileigenschaft zu ändern, um einen benutzerdefinierten Textausrichtungsstil hinzuzufügen.

Derzeit in jQuery können Sie so etwas wie

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

tun, aber ich kann nicht einen guten Weg zu finden, scheint der Text-align mit dem gleichen Ansatz zu ändern.

Das Element hat bereits eine Klasse und ich setze die Textausrichtung in dieser Klasse ohne Glück. Ist es möglich, ein css-Attribut text-align zu diesem Element hinzuzufügen, nachdem eine Klasse definiert wurde?

Ich habe so etwas wie diese

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

kurz nach meiner Breitenverstellung und nachdem ich sehe dies in Firebug ich nur „Breite“ sehe, ist die einzige Eigenschaft auf dem Stil. Irgendwelche Hilfe?

EDIT:

Whoa - große Antwort auf diese Frage! Danke an alle, die geantwortet haben! Ein bisschen mehr Detail, um das Problem auf der Hand:

Ich bin die js Quelle für jqGrid A3.5 Tweaking einige benutzerdefinierte Untergitterwerk und die tatsächlichen JS ich bin Zwicken zu tun ist unten (sorry gezeigt „dies für die Verwendung von "in meinen Beispielen oben, aber ich wollte diese einfache Kürze wegen halten)

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

ich beide der unten versucht haben (aus den Antworten zur Verfügung gestellt) ohne Glück.

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

UND

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

ich heute zu diesem Thema werde weiter daran arbeiten und eine endgültige Lösung für die von jemandem meinen Schmerz, um diese seltsamen Frage zu fühlen.

Answer 1

Sie haben die richtige Idee, wie Dokumentation zeigt:

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

Sind Sie sicher, dass Sie diese richtig mit Klasse oder id identifizieren?

Zum Beispiel, wenn Ihre Klasse ist myElementClass

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

Auch habe ich nicht mit Firebug in einer Zeit lang gearbeitet, aber suchen Sie im Dom und nicht die html? Ihre Quelle wird nicht von Javascript geändert, aber das Dom ist. Suchen Sie im Tab "Dom" nach, ob die Änderung angewendet wurde.

Answer 2

$(this).css("text-align", "center"); sollte funktionieren, stellen Sie sicher, dass "dies" das Element ist, das Sie tatsächlich versuchen, den text-align-Stil zu setzen.

Answer 3

könnten Sie auch versuchen, die folgend einen Inline-Stil für das Element hinzuzufügen:

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

Dies sollte sicherstellen, dass andere Styling-Regeln nicht überschreiben, was Sie dachten funktionieren würde. Ich glaube, dass Inline-Stile in der Regel Vorrang haben.

EDIT: Auch ein anderes Werkzeug, das Ihnen helfen kann, ist Jash (http://www.billyreisinger.com/jash/). Es gibt Ihnen eine Javascript-Eingabeaufforderung, damit Sie sicherstellen können, dass Sie einfach JavaScript-Anweisungen testen und sicherstellen, dass Sie das richtige Element usw. auswählen.

Answer 4

Ich denke, Sie sollten "textAlign" anstelle von "text-align" verwenden.

Answer 5

Interessant. Ich habe das gleiche Problem wie Sie, als ich eine Testversion schrieb.

Die Lösung ist jquery die Fähigkeit chain und tun zu verwenden:

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

So interessant finden.

ein wenig zu erweitern, hat die folgende nicht Arbeit

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

und Ergebnisse nur in der Breite auf den Stil festgelegt wird. Das Verketten der beiden scheint, wie ich oben angedeutet habe, zu funktionieren.

Answer 6

ich in der Regel

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

Hoffnung verwenden, die

Answer 7

Stimmt hilft?

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

Answer 8

<!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> 

Answer 9

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

Sie Klassennamen und ID anstelle dieses

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

oder

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

Answer 10

können unten annehmen ist die HTML-Absatz-Tag:

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

und wir möchten die Absatzfarbe in jquery ändern.

Der Seitencode-Client sein wird:

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