Jak dynamicznie dodać styl wyrównywania tekstu przy użyciu jQuery

Próbuję poprawić typowe błędy IE dotyczące CSS 2.1 i potrzebuję sposobu na zmianę właściwości stylu elementów, aby dodać niestandardowy styl wyrównywania tekstu.

Obecnie w jQuery możesz zrobić coś takiego jak

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

ale wydaje mi się, że nie mogę znaleźć dobrego sposobu na zmianę wyrównania tekstu za pomocą tego samego podejścia.

Przedmiot ma już klasę i ustawiłem wyrównanie tekstu w tej klasie bez powodzenia. Czy można po prostu dodać atrybut CSS wyrównywania tekstu do tego elementu po zdefiniowaniu klasy?

Mam coś takiego

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

zaraz po dostosowaniu szerokości i po obejrzeniu tego w programie firebug widzę tylko „width” jest jedyną ustawioną właściwością stylu. Jakaś pomoc?

EDYTOWAĆ:

Ooo - wielka odpowiedź na to pytanie! Trochę więcej szczegółów na temat problemu:

Poprawiam źródło js dla jqGrid A3.5, aby wykonać niestandardową pracę z podsiatkami, a rzeczywisty JS, który poprawiam, jest pokazany poniżej (przepraszam za użycie "this" w moich przykładach powyżej, ale chciałem zachować to proste dla zwięzłość)

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

Wypróbowałem oba poniższe (z podanych odpowiedzi) bez powodzenia.

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

I

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

Będę nadal pracować nad tym problemem dzisiaj i opublikuję ostateczne rozwiązanie dla każdego, kto odczuwa mój ból związany z tym dziwnym problemem.

Masz dobry pomysł, jak pokazuje dokumentacja:

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

Czy na pewno poprawnie identyfikujesz to z klasą lub identyfikatorem?

Na przykład, jeśli Twoja klasa to myElementClass

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

Poza tym od jakiegoś czasu nie pracowałem z Firebug, ale czy patrzysz na dom, a nie na html? Twoje źródło nie jest zmieniane przez JavaScript, ale dom tak. Spójrz na kartę dom i zobacz, czy zmiana została zastosowana.

Możesz również spróbować wykonać następujące czynności, aby dodać styl wbudowany do elementu:

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

Powinno to zapewnić, że inne zasady stylizacji nie zastępują tego, co według Ciebie zadziała. Uważam, że style wbudowane zwykle mają pierwszeństwo.

EDYCJA: Kolejnym narzędziem, które może ci pomóc, jest Jash ( http://www.billyreisinger.com/jash/ ). Daje ci wiersz poleceń javascript, dzięki czemu możesz łatwo przetestować instrukcje javascript i upewnić się, że wybierasz właściwy element itp.

Zwykle używam

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

Mam nadzieję, że to pomoże

Myślę, że powinieneś użyć „textAlign” zamiast „text-align”.

Ciekawy. Mam ten sam problem co Ty, kiedy pisałem wersję testową.

Rozwiązaniem jest użycie zdolności jquery do łączenia i wykonywania:

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

Ciekawe znalezisko.

Aby nieco rozszerzyć, poniższe nie działają

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

i powoduje tylko ustawienie szerokości stylu. Jak zasugerowałem powyżej, łączenie tych dwóch łańcuchów wydaje się działać.

$(this).css("text-align", "center"); powinien działać, upewnij się, że „this” jest elementem, na który faktycznie próbujesz ustawić styl wyrównania tekstu.

Jest poprawne?

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

Zamiast tego możesz użyć nazwy i identyfikatora klasy

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

lub

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

załóżmy, że poniżej znajduje się znacznik akapitu html:

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

i chcemy zmienić kolor akapitu w jquery.

Kod po stronie klienta będzie wyglądał następująco:

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

jak ustawić środek pól tekstowych