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

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

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

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

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

Элемент уже имеет класс, и я не устанавливаю выравнивание текста в этом классе без везения. Можно ли просто добавить атрибут css text-align для этого элемента после определения класса?

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

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

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

EDIT:

Whoa - большой ответ на этот вопрос! Спасибо всем, кто ответил! Немного больше о проблеме:

Я настраиваю 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');

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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

EDIT: Кроме того, другим инструментом, который может вам помочь, является Jash (http://www.billyreisinger.com/jash/). Он дает вам командную строку javascript, чтобы вы могли легко проверить javascript-инструкции и убедиться, что вы выбираете правильный элемент и т.д.

Ответ 3

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

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

Надеюсь, что поможет

Ответ 4

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

Ответ 5

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

Решение состоит в том, чтобы использовать функцию jquery для chain и сделать:

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

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

Чтобы развернуть бит, выполните не работу

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

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

Ответ 6

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

Ответ 7

Правильно?

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

Ответ 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>

Ответ 9

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

Вместо этого

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

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

или

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