JQuery Mobile - Javascriptで動的にCSSを変更する

Question

JQuery MobileでボタンのCSSを変更しようとすると問題が発生しています。私はデフォルトのページヘッダーieを使用していません。ヘッダー内では、ロゴなどでdivをネストしているので、ヘッダーの高さはデフォルトの約2倍です。

問題は戻るボタンです。デフォルトでは左上になりますが、私はそれを垂直にセンタリングしたいと思います。この目的のために、JQuery Mobileのスクリプトインクルードのすぐ下のページヘッダーに以下のスクリプトを挿入しました。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".ui-btn").css("margin","20px"); 
    } 
</script> 

HTMLは次のようになります。

<div data-role="page" id="main" data-theme="b"> 
<div id="myheader" data-role="header"><div id="header"><div id="logo"><img src="assets/logo.gif" alt="Acme" /></div></div></div> 

私はどのような方法でUIのCSSと対話するように見えることはできません。

$("#myheader a.ui-btn").css("margin","20px"); 

と

$(".ui-btn-left").css("margin","20px"); 

そしてまた '$（ドキュメント）.ready（関数（）{' 内にネストされていないが、何も動作しているようだん

：私も試してみました。

私も色を変更したいのですが、私はこれを働いてきた後、私はそれに移動しましょう！すべてのヘルプやポインタを非常に高く評価されるだろう。

おかげ

を

Greg

Answer 1

完全なHTMLで、JavaScriptは他のマークアップを生成していませんか？

クラスが.ui-btnまたはui-btn-leftの要素を選択していますが、これらの要素は指定したマークアップには存在しません。

Javascriptで生成されたHTMLが表示されるので、Firebugで確認することをおすすめします。

------ EDIT INFOがOK -------

を提供した後、私は何をあなたに実行していることは、インライン要素の位置を制御するためのマージンの使用だと思います。 <a>または<span>がCSSによってブロック要素として具体的に設定されている場合を除き、マージンが予想通りにマージンに影響しないことがあります。

ターゲットをブロック要素として最初に設定し、CSSを外部スタイルシートまたはjQueryではなくページ上の<style>タグ内に適用することをおすすめします。問題は、あなたとの対話CSSを使用することはできませんという限らないよう

<style> 
    #myheader a.ui-btn {display: block; margin: 20px;} 
</style> 

が私にサウンド：それはあなたを取得する場所

代わりにあなたが参照スニペットその小さなJSのこのような何かを試してみて、そして見ますUIのHTMLではなく、あなたが期待していたように振る舞いません。