Как динамически добавить стиль для выравнивания текста с помощью jQuery

Я пытаюсь исправить обычные ошибки IE в CSS 2.1, и мне нужен способ изменить свойства стиля элементов, чтобы добавить собственный стиль выравнивания текста.

В настоящее время в jQuery вы можете сделать что-то вроде

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

но я не могу найти хороший способ изменить выравнивание текста с помощью того же подхода.

У элемента уже есть класс, и я безуспешно установил выравнивание текста в этом классе. Можно ли просто добавить к этому элементу атрибут CSS с выравниванием текста после определения класса?

У меня есть что-то вроде этого

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

сразу после настройки ширины и после просмотра этого в firebug я вижу, что только «ширина» - единственное свойство, установленное для стиля. Любая помощь?

РЕДАКТИРОВАТЬ:

Ого - большой ответ на этот вопрос! Немного подробнее о проблеме:

Я настраиваю исходный код js для jqGrid A3.5, чтобы выполнить некоторую настраиваемую работу с подсеткой, и фактический JS, который я настраиваю, показан ниже (извините за использование «this» в моих примерах выше, но я хотел, чтобы это было просто для краткость)

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

Я пробовал оба из приведенных ниже (из предоставленных ответов) безуспешно.

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

И

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

Я продолжу работу над этой проблемой сегодня и опубликую окончательное решение для всех, кто испытывает мою боль по этой странной проблеме.

Как видно из документации, у вас есть правильная идея:

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

Вы уверены, что правильно определили это с помощью класса или идентификатора?

Например, если ваш класс myElementClass

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

Кроме того, я давно не работал с Firebug, но вы смотрите на dom, а не на html? Ваш источник не изменен javascript, но dom изменяется. Посмотрите на вкладку dom и посмотрите, было ли применено изменение.

Вы также можете попробовать следующее, чтобы добавить к элементу встроенный стиль:

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

Это должно гарантировать, что другие правила стиля не отменяют то, что, по вашему мнению, будет работать. Я считаю, что встроенные стили обычно имеют приоритет.

РЕДАКТИРОВАТЬ: Кроме того, еще один инструмент, который может вам помочь, - это Jash ( http://www.billyreisinger.com/jash/ ). Он дает вам командную строку javascript, чтобы вы могли легко тестировать операторы javascript и выбирать правильный элемент и т. Д.

Я обычно использую

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

надеюсь, это поможет

Я думаю, вам следует использовать textAlign вместо text-align.

Интересно. У меня такая же проблема, как и у вас, когда я писал тестовую версию.

Решение состоит в том, чтобы использовать способность Jquery к цепи и сделать:

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

Но интересная находка.

Чтобы немного расширить, следующее не работает

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

и приводит только к установке ширины стиля. Соединение этих двух цепочек, как я предложил выше, похоже, работает.

$(this).css("text-align", "center"); должен работать, убедитесь, что это именно тот элемент, для которого вы на самом деле пытаетесь установить стиль выравнивания текста.

Верно?

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

Вы можете использовать имя класса и идентификатор вместо этого

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

или же

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

предположим, что ниже тег абзаца html:

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

и мы хотим изменить цвет абзаца в jquery.

Код на стороне клиента будет:

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

как установить центр текстовых полей