Pytanie Jak dynamicznie dodać styl do wyrównania tekstu za pomocą jQuery


Próbuję poprawić zwykłe błędy IE wokół CSS 2.1 i potrzebuję sposobu na zmianę właściwości stylu elementów, aby dodać niestandardowy styl wyrównania tekstu.

Obecnie w jQuery możesz zrobić coś takiego

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

ale nie mogę znaleźć dobrego sposobu na zmianę dopasowania tekstu przy użyciu tego samego podejścia.

Element ma już klasę i ustawiam wyrównanie tekstu w tej klasie bez powodzenia. Czy jest możliwe dodanie atrybutu CSS z wyrównaniem do tekstu do tego elementu po zdefiniowaniu klasy?

Mam coś takiego

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

tuż po mojej regulacji szerokości i po zobaczeniu tego w firebug widzę, że tylko "width" jest jedyną właściwością ustawioną w stylu. Jakaś pomoc?

EDYTOWAĆ:

Whoa - duża odpowiedź na to pytanie! Trochę więcej szczegółów na temat problemu:

Poprawiam źródło js jqGrid A3.5 wykonuję niestandardową pracę podsieci, a aktualny JS, który poprawiam, jest pokazany poniżej (przykro mi z powodu użycia "tego" w moich przykładach powyżej, ale chciałem zachować to proste dla zwięzłości)

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

Próbowałem obydwu poniższych (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');

Nadal będę pracował nad tym zagadnieniem już dziś i opublikuję ostateczne rozwiązanie dla każdego, kto odczuwa mój ból wokół tego dziwnego problemu.


76
2018-05-19 14:38


pochodzenie




Odpowiedzi:


Masz dobry pomysł, jak pokazuje dokumentacja:

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

Czy jesteś pewien, że prawidłowo identyfikujesz to z klasą lub identyfikatorem?

Na przykład, jeśli twoją klasą jest myElementClass

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

Poza tym od dawna 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 jest. Spójrz na kartę dom i sprawdź, czy zmiana została zastosowana.


147
2018-05-19 14:49



Powinno działać, ale wydaje się nie działać, gdy jest używane w połączeniu z width (), które zostało ustawione wcześniej. Odpowiedzią jest użycie łańcucha jquery. - Steerpike


Można również wypróbować następujące elementy, aby dodać element wbudowany do elementu:

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

Powinno to zapewnić, że inne zasady stylizacji nie będą miały wpływu na to, co Twoim zdaniem mogłoby zadziałać. Uważam, że style liniowe mają zazwyczaj pierwszeństwo.

EDYTOWAĆ: Innym narzędziem, które może ci pomóc, jest Jash (http://www.billyreisinger.com/jash/). Wyświetla wiersz polecenia javascript, dzięki czemu można łatwo sprawdzić wyciągi JavaScript i upewnić się, że wybierasz właściwy element itp.


41
2018-05-19 14:49





Zwykle używam

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

Nadzieja, która pomaga


11
2018-05-19 15:33





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


2
2018-05-19 14:50



Byłoby tak tylko w przypadku ustawiania stylu przy użyciu manipulacji DOM DOMAMI JavaScript. jQuery css () używa rzeczywistych słów kluczowych css. - garrow
Działa to świetnie, jeśli używasz .css({multiple-styles}) - Cody Guldner


Ciekawy. Mam taki sam problem jak ty, kiedy napisałem wersję testową.

Rozwiązaniem jest użycie umiejętności jQuery łańcuch i robić:

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

Ciekawe jednak znaleźć.

Aby rozwinąć nieco, wykonaj następujące czynności nie praca

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

i wyświetla tylko szerokość ustawioną w stylu. Połączenie łańcuchowe, jak sugerowałem powyżej, wydaje się działać.


2
2018-05-19 15:01





$(this).css("text-align", "center"); powinien zadziałać, upewnij się, że "to" jest elementem, do którego próbujesz ustawić styl wyrównania tekstu.


1
2018-05-19 14:46





Jest poprawne?

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

0
2017-09-09 17:31





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

0
2018-03-17 05:31





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

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

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

lub

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

0
2017-09-01 07:04





function add_question () {     var count = document.getElementById ("nofquest"). wartość;     var container = document.getElementById ("container");             // Wyczyść poprzednią zawartość kontenera             while (container.hasChildNodes ())             {                 container.removeChild (container.lastChild);             }             dla (i = 1;

jak ustawić środek pól tekstowych


0
2018-04-18 04:06



popraw formatowanie ... - Pierre.Vriens
1. Formatowanie 2. Czy możesz podać wyjaśnienie? - jhpratt