web-dev-qa-db-ja.com

jQueryを使用してtext-alignのスタイルを動的に追加する方法

CSS 2.1に関連する通常のIEバグを修正しようとしていますが、要素のスタイルプロパティを変更してカスタムのテキスト配置スタイルを追加する方法が必要です。

現在、jQueryでは次のようなことができます

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

しかし、この同じアプローチでテキストの配置を変更する良い方法を見つけることはできないようです。

アイテムにはすでにクラスがあり、そのクラスにテキストの配置を設定しましたが、うまくいきません。クラスが定義された後に、この要素にtext-align CSS属性を追加することは可能ですか？

私はこのようなものを持っています

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

幅の調整後、Firebugでこれを表示した後、スタイルに設定されているプロパティは「幅」のみです。助けがありますか？

編集：

おっ-この質問に対する大きな反応！目の前の問題についてもう少し詳しく：

jqGrid A3.5のjsソースを調整して、カスタムサブグリッドの作業を行います。実際に調整している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');

私はこの問題に引き続き取り組み、この奇妙な問題に苦痛を感じている人のために最終的な解決策を投稿します。

jquerycsstext-align
79
Toran Billups

ドキュメントが示すように、あなたは正しい考えを持っています：

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

これをクラスまたはIDで正しく識別していますか？

たとえば、クラスがmyElementClassの場合

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

また、私はしばらくの間Firebugで作業したことはありませんが、htmlではなくdomを見ていますか？ソースはjavascriptによって変更されませんが、domは変更されます。 [dom]タブを見て、変更が適用されたかどうかを確認します。

159
Tim Hoolihan

以下を試して、要素にインラインスタイルを追加することもできます。

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

これにより、他のスタイリングルールが機能すると思っていたものを上書きしないようにする必要があります。通常、インラインスタイルが優先されると考えています。

EDIT：また、Jash（ http://www.billyreisinger.com/jash/ ）。 javascriptコマンドプロンプトが表示されるため、javascriptステートメントを簡単にテストし、正しい要素などを選択していることを確認できます。

41
kbosak

私は通常使用します

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

役立つことを願っています

11
Nooshu

「text-align」の代わりに「textAlign」を使用する必要があると思います。

2
bperreault

面白い。テスト版を書いたとき、私はあなたと同じ問題を抱えていました。

解決策は、jqueryの機能を使用して chain を実行することです。

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

興味深い発見。

ビットを拡張するために、以下はnot動作します

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

その結果、スタイルに設定されている幅のみになります。上で提案したように、2つのチェーンはうまく機能しているようです。

2
Steerpike

$(this).css("text-align", "center");は動作するはずです。'this 'が実際にtext-alignスタイルを設定しようとしている要素であることを確認してください。

1
John Boker
<!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
Nikit Barochiya

正しい？

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

これの代わりにクラス名とIDを使用できます

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

または

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

テキストボックスの中心を設定する方法

0
kanchana