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

81

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.

Toran Billups
quelle

Antworten:

165

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.

Tim Hoolihan
quelle
1
Es sollte funktionieren, aber es scheint zu scheitern, wenn es in Verbindung mit der zuvor festgelegten Breite () verwendet wird. Die Antwort ist die Verwendung der Abfrageverkettung.
Steerpike
42

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.

kbosak
quelle
12

Ich benutze normalerweise

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

hoffentlich hilft das

Nooshu
quelle
2

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

bperreault
quelle
5
Dies wäre nur dann der Fall, wenn der Stil mithilfe der Vanille-Javascript-DOM-Manipulation festgelegt wird. jQuery css () verwendet stattdessen tatsächliche CSS-Schlüsselwörter.
Garrow
2

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.

Steerpike
quelle
1

$(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.

John Boker
quelle
0

Ist richtig?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
user2762271
quelle
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>
Nikit Barochiya
quelle
0
 $(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'});
SNG
quelle
-1

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> 
Siddharam Padamgond
quelle
Verbessert dies in irgendeiner Weise die gegebenen Antworten?
Nico Haase
-1
Funktion add_question () {var count = document.getElementById ("nofquest"). value; var container = document.getElementById ("container"); // Vorherigen Inhalt des Containers löschen while (container.hasChildNodes ()) {container.removeChild (container.lastChild); } für (i = 1; i

So legen Sie die Mitte der Textfelder fest

Kanchana
quelle
1. Formatierung 2. Können Sie eine Erklärung abgeben?
jhpratt