jQueryを使用してテキストアラインメントのスタイルを動的に追加する方法

CSS 2.1の通常のIEバグを修正しようとしていますが、要素のスタイルプロパティを変更してカスタムのテキストアラインスタイルを追加する方法が必要です。jQueryを使用してテキストアラインメントのスタイルを動的に追加する方法

は現在、jQueryのでは、あなたは

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

ような何かを行うことができますが、私はこれと同じアプローチでテキスト整列を変更するための良い方法を見つけるように見えることはできません。

アイテムには既にクラスがあり、そのクラスのテキストアライメントを運行なしに設定します。クラスが定義された後に、この要素にtext-align css属性を追加することは可能ですか？

は、私はちょうど私の幅調整後、私は私が唯一の「幅」を参照してください放火犯でこれを表示した後、この

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

のようなものを持っているスタイルに設定された唯一の財産です。ヘルプがありますか？

EDIT：

おっと - この質問に大きな応答！返事をいただいた皆様に感謝します！問題の周辺の詳細：

私はjqGridのためのjsソースを調整しています。カスタムサブグリッドの作業と実際のJSを調整するためのA3.5を以下に示します。 "上記の私の例では、私は、私は運を下記（の回答）からの両方を試した

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

私は今日、この問題に取り組み、この奇妙な問題を回避私の痛みを感じる人のための最終的な解決策を掲載していきます。

出典

2009-05-19 Toran Billups

146

文書が示すようにあなたは、正しい考えを持っている：

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

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

はたとえば、あなたのクラスはまた、私はしばらくのFirebugで働いていないmyElementClass

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

ある場合がありますが、HTML DOMではなく見ていますか？あなたのソースはjavascriptによって変更されませんが、domは変更されません。 domタブを見て、変更が適用されているかどうかを確認します。

出典

2009-05-19 14:49:24

それが動作するはずですが、幅と組み合わせて使用した場合に失敗するようだ（）以前に設定されています。答えは、jquery chainingを使用することです。 – Steerpike

$(this).css("text-align", "center");実際には、これがテキストアラインメントスタイルを設定しようとしている要素であることを確認してください。

出典

2009-05-19 14:46:56

また、要素にインラインスタイルを追加するには、次のことを試みることができる：

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

これは、他のスタイル規則は、あなたが仕事だろうと思ったものを上書きしていないことを確認する必要があります。私はインラインスタイルが通常優先されると信じています。

EDIT： また、Jash（http://www.billyreisinger.com/jash/）を助けるツールもあります。それはあなたにjavascriptコマンドプロンプトを提供するので、あなたは簡単にjavascript文をテストし、正しい要素などを選択していることを確認できます。

出典

2009-05-19 14:49:57 kbosak

"text-align"の代わりに "textAlign"を使うべきだと思います。

出典

2009-05-19 14:50:59 bperreault

これは、vanilla javascript DOM操作を使用してスタイルを設定する場合にのみ当てはまります。 jQueryのcss（）では代わりに実際のCSSキーワードを使用します。 – garrow

これは '.css（{multiple-styles}） 'を使うとうまくいきます –

興味深い。私はあなたがテスト版を書いたときと同じ問題を抱えています。

ソリューションはchainにjQueryの能力を使用することで、実行します。

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

面白いけれども。ビットを拡大する

、次はスタイルだけで設定された幅の

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

と結果ない作業を行います。私が上に示唆したように、2つを連鎖することはうまくいくようです。

出典

2009-05-19 15:01:30 Steerpike

私は通常

出典

2009-05-19 15:33:32 Nooshu

は正しいです役立ちます

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

希望を使うのか？

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

出典

2013-09-09 17:31:19 user2762271

<!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>

出典

2017-03-17 05:31:08

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

あなたは以下と仮定し、この

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

または

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

出典

2017-09-01 07:04:02 Sucharitha

-1

の代わりにクラス名とidを使用することができますHTMLの段落タグである：

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

jqueryの段落の色を変更します。

クライアント側のコードは次のようになります。

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

出典

2018-02-01 11:13:45

これはどのようにしても与えられた答えを改善しますか？ –

jQueryを使用してテキストアラインメントのスタイルを動的に追加する方法

答えて

関連する問題