Як динамічно додати стиль для вирівнювання тексту за допомогою jQuery

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

Наразі в jQuery ви можете робити щось на зразок

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

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

Елемент уже має клас, і я встановив вирівнювання тексту в цьому класі без удачі. Чи можна просто додати CSS-атрибут CSS для вирівнювання за текстом після визначення класу?

У мене є щось подібне

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

відразу після мого налаштування ширини та після того, як я переглядаю це у firebug, я бачу, що лише "width" - це єдина властивість, встановлена ​​у стилі. Будь-яка допомога?

РЕДАГУВАТИ:

Ого - велика відповідь на це питання! Трохи детальніше про проблему:

Я налаштовую джерело js для jqGrid A3.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');

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

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

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

Це має переконатися, що інші правила стилізації не замінюють те, що, на вашу думку, буде працювати. Я вважаю, що вбудовані стилі зазвичай мають перевагу.

EDIT: Крім того, ще один інструмент, який може вам допомогти, - це 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> 

як встановити центр текстових полів -