So fügen Sie mithilfe von jQuery dynamisch einen Stil für die Textausrichtung hinzu

Ich versuche, die üblichen IE-Fehler in CSS 2.1 zu beheben, und benötige eine Möglichkeit, die Eigenschaften eines Elementstils zu ändern, um einen benutzerdefinierten Textausrichtungsstil hinzuzufügen.

Derzeit können Sie in jQuery so etwas tun

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

aber ich kann anscheinend keinen guten Weg finden, um die Textausrichtung mit demselben Ansatz zu ändern.

Der Gegenstand hat bereits eine Klasse und ich habe die Textausrichtung in dieser Klasse ohne Glück eingestellt. Ist es möglich, diesem Element einfach ein CSS-Attribut zur Textausrichtung hinzuzufügen, nachdem eine Klasse definiert wurde?

Ich habe so etwas

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

Kurz nach meiner Breitenanpassung und nachdem ich dies in Firebug angezeigt habe, sehe ich, dass nur "Breite" die einzige Eigenschaft ist, die für den Stil festgelegt wurde. Irgendeine Hilfe?

BEARBEITEN:

Whoa - große Antwort auf diese Frage! Ein bisschen mehr Details zum vorliegenden Problem:

Ich optimiere die js-Quelle für jqGrid A3.5, um einige benutzerdefinierte Sub-Grid-Arbeiten auszuführen, und die tatsächliche JS, die ich optimiere, wird unten angezeigt (Entschuldigung für die Verwendung von "this" in meinen obigen Beispielen, aber ich wollte dies einfach halten Kürze)

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 habe beide der folgenden Punkte (aus den Antworten) ohne Glück ausprobiert.

$(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 werde heute weiter an diesem Problem arbeiten und eine endgültige Lösung für alle veröffentlichen, die meinen Schmerz in Bezug auf dieses seltsame Problem spüren.

Sie haben die richtige Idee, wie die Dokumentation zeigt:

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

Sind Sie sicher, dass Sie dies korrekt mit Klasse oder ID identifizieren?

Zum Beispiel, wenn Ihre Klasse myElementClass ist

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

Ich habe auch schon eine Weile nicht mehr mit Firebug gearbeitet, aber siehst du dir den Dom an und nicht den HTML-Code? Ihre Quelle wird nicht durch Javascript geändert, aber der Dom ist. Überprüfen Sie auf der Registerkarte dom, ob die Änderung übernommen wurde.

Sie können auch Folgendes versuchen, um dem Element einen Inline-Stil hinzuzufügen:

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

Dies sollte sicherstellen, dass andere Styling-Regeln nicht überschreiben, was Ihrer Meinung nach funktionieren würde. Ich glaube, dass Inline-Stile normalerweise Vorrang haben.

BEARBEITEN: Ein weiteres Tool, das Ihnen helfen kann, ist Jash ( http://www.billyreisinger.com/jash/ ). Sie erhalten eine Javascript-Eingabeaufforderung, mit der Sie sicherstellen können, dass Sie Javascript-Anweisungen problemlos testen und das richtige Element usw. auswählen können.

Ich benutze normalerweise

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

hoffentlich hilft das

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

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

Die Lösung ist die Verwendung von Jquery die Fähigkeit Kette und tun:

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

Interessanter Fund.

Um ein wenig zu erweitern, hat die folgende nicht Arbeit

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

und führt nur dazu, dass die Breite für den Stil festgelegt wird. Die beiden zu verketten, wie ich oben vorgeschlagen habe, scheint zu funktionieren.

$(this).css("text-align", "center"); Sollte dies funktionieren, stellen Sie sicher, dass 'this' das Element ist, auf das Sie den Textausrichtungsstil tatsächlich festlegen möchten.

Ist richtig?

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

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

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

Sie können stattdessen den Klassennamen und die ID verwenden

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

oder

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

Angenommen, unten ist das HTML-Absatz-Tag:

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

und wir wollen die Absatzfarbe in jquery ändern.

Der clientseitige Code lautet:

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

So legen Sie die Mitte der Textfelder fest