Wie dynamisch einen Stil für text-align hinzufügen mit jQuery

Question

Ich versuche, den üblichen IE Bugs rund um CSS 2.1 und brauchte eine Möglichkeit zur Korrektur eines Element Stil Eigenschaften zu ändern, um einen benutzerdefinierten text-align Stil hinzuzufügen.

Zur Zeit in jQuery können Sie tun so etwas wie

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

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

Der Artikel hat bereits eine Klasse und ich die text-align in dieser Klasse ohne Glück. Ist es möglich, dieses Element nur ein text-align CSS-Attribut hinzufügen, nachdem eine Klasse definiert ist?

Ich habe so etwas wie diese

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

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

EDIT:

Whoa - große Antwort auf diese Frage! Ein bisschen mehr Detail, um das Problem auf der Hand:

Ich bin zwicken die js Quelle für jqGrid A3.5 einige benutzerdefinierte Unter Gitter zu tun Arbeit und die tatsächlichen JS ich bin Zwicken ist unten dargestellt (sorry für die Verwendung von „this“ in meinen Beispielen oben, aber ich diese einfache Kürze halber halten wollte)

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 sowohl die unten (aus den Antworten zur Verfügung gestellt) ohne Glück versucht.

$(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 zu diesem Thema arbeiten und eine endgültige Lösung für 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 richtig diese identifizieren sich mit Klasse oder id?

Zum Beispiel, wenn Ihre Klasse ist myElementClass

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

Auch ich habe nicht mit Firebug in einer Zeit lang gearbeitet, aber suchen Sie im Dom und nicht die html? Ihr Partner wird nicht von Javascript geändert, aber der dom ist. Schauen Sie in dem dom Registerkarte und sehen, ob die Änderung angewandt wurde.

Answer 2

Sie können auch die folgende versuchen, einen Inline-Stil auf das Element hinzuzufügen:

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

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

EDIT: ein weiteres Werkzeug auch, die Ihnen helfen kann, ist Jash ( http://www.billyreisinger.com/jash/). Es gibt Ihnen eine Javascript-Eingabeaufforderung, so dass Sie sicher, können Sie einfach JavaScript-Anweisungen testen und stellen Sie sicher, dass Sie das richtige Element sind die Auswahl, etc.

Answer 3

ich in der Regel verwenden

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

Ich hoffe, das hilft

Answer 4

Ich denke, Sie sollten "align" anstelle von "text-align" verwendet werden.

Answer 5

Interessant. Ich habe das gleiche Problem wie du, wenn ich eine Testversion geschrieben.

Die Lösung ist jquery die Fähigkeit zu verwenden href="http://ejohn.org/blog/ultra-chaining-with-jquery/" rel="nofollow noreferrer"> Kette zu

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

interessant though.

ein wenig zu erweitern, die folgende tut nicht Arbeit

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

und Ergebnisse nur in der Breite auf dem Stil festgelegt werden. die zwei Chaining, wie ich oben vorgeschlagen, zu funktionieren scheint.

Answer 6

$(this).css("text-align", "center"); sollte funktionieren, stellen Sie sicher, dass ‚dies‘ das Element bist du eigentlich zu setzen versuchen, den text-align Stil.

Answer 7

ist richtig?

<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 können Klassennamen und ID statt dessen verwenden

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

oder

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

Answer 10

add_question Funktion () {     var count = document.getElementById ( "nofquest") Wert.     var container = document.getElementById ( "Container");             // Lösche vorheriger Inhalt des Behälters             while (container.hasChildNodes ())             {                 Container.removeChild (container.lastChild);             }             for (i = 1; i

, wie Mitte der Textfelder setzen

Answer 11

annehmen, unten ist der HTML-Absatz-Tag:

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

, und wir wollen den Absatz Farbe in Jquery ändern.

Der Client-Seite Code wird sein:

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