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

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

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

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

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

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

у меня что-то вроде этого 

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

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

EDIT:

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

я настраиваю источник js для jqGrid А3.5 чтобы сделать некоторые пользовательские суб-сетки работы и фактического JS я настройки показано ниже (извините за использование "это" в моих примерах выше, но я хотел бы сохранить это просто для краткости)

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

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

11 77
css jquery text-alignment

11 ответов:

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

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

вы уверены, что правильно определить этот класс или ID?

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

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

кроме того, я давно не работал с Firebug, но вы смотрите на dom, а не на html? Это ваш источник не менялись с помощью JavaScript, но дом. Посмотрите на вкладке dom и посмотреть, если было применено изменение.

150

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

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

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

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

41

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

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

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

11

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

2

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

решение заключается в использовании способности jquery цепи и у:

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

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

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

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

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

2

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

1

правильно?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
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>
0
 $(this).css({'text-align':'center'});

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

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

или

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

add_question функции (){ var count=документ.getElementById ("nofquest").значение; var container = документ.метода getElementById("контейнер"); // Очистить предыдущее содержимое контейнера пока (контейнер.hasChildNodes()) { контейнер.removeChild(контейнер.режима lastchild); } ибо (i=1; i

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

0

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

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

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

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

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