85

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

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

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

しかし、この同じアプローチで text-align を変更する良い方法を見つけることができないようです。

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

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

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

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

編集：

おっと-この質問に対する大きな反応！当面の問題についてもう少し詳しく説明します。

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

私は今日もこの問題に取り組み、この奇妙な問題について私の痛みを感じている人のために最終的な解決策を投稿します.

4

11 に答える 11

171

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

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

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

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

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

また、私はしばらくFirebugを使用していませんが、HTMLではなくdomを見ていますか？ソースはjavascriptによって変更されませんが、domは変更されます。domタブを見て、変更が適用されたかどうかを確認します。

于 2009-05-19T14:49:24.680 に答える
44

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

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

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

編集： また、あなたを助けるかもしれない別のツールはJash（http://www.billyreisinger.com/jash/）です。javascriptコマンドプロンプトが表示されるので、javascriptステートメントを簡単にテストし、適切な要素などを選択していることを確認できます。

于 2009-05-19T14:49:57.410 に答える
14

私は通常使用します

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

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

于 2009-05-19T15:33:32.720 に答える
2

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

于 2009-05-19T14:50:59.403 に答える
2

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

解決策は、連鎖して行うjqueryの機能を使用することです：

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

しかし興味深い発見。

少し拡張するには、以下は機能しません

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

スタイルに設定されている幅のみになります。上で提案したように、この 2 つを連鎖させるとうまくいくようです。

于 2009-05-19T15:01:30.803 に答える
1

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

于 2009-05-19T14:46:56.697 に答える
0

正しい？

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
于 2013-09-09T17:31:19.987 に答える