jQuery - CSSクラスの値を動的に変更する

Question

jQueryで書かれた画像スライダーがあります。私は画像を2つのグループ（雑誌のようなもの）にする必要があります。クラスの.pageLeftと.pageRightは、コンテナの幅からページの幅を差し引いた左または右のマージンを適用します。img（.pageクラス）。私はこのスライダをフルスクリーンで表示し、.pageLeft/.pageRightクラスの.pageとマージンの幅を動的に計算して変更できるようにしたいと考えています。これを行う方法はありますか、または私はこれについてすべて間違っていますか？

これを行うには、クラスをDOMに直接書き込むことが最も良い方法ですが、その後はいつでも空にして追加する必要があります。ここで

は私が

nPageWidth = 768; 
nPageWidthPlusMargin = ($('#container').width()/2); 
nPageMargin = nPageWidthPlusMargin - nPageWidth; 

を言った後、CSSのクラスのマージン左= nPageMarginを変更するには、その値を使用しようとしているものの一例です。

ご迷惑をおかけして申し訳ありません。御時間ありがとうございます。

編集私がこのようにしようとしている主な理由は、画像の幅を画像の高さの3倍に設定することによって画像のアスペクト比を維持することです。画像の高さは100％の容器。

Answer 1

ですか？その場合は、2つのページをラッパーでラップし、そのラッパーに明示的な幅を与え、ラッパーの左右の余白をautoに設定します。

次に、余白の計算について心配する必要はありません。ラッパーの幅が正しいことを確認してください。この幅は、デザインによっては、コンテナのパーセンテージとして設定することもできます。ラップされたページについても同様で、width: 50%を持つことができます。この方法では、あなたも、Javascriptを必要としない:)

フィドル：http://jsfiddle.net/F4ktm/

Answer 2

ピクセル値の代わりにマージンの割合を使用する必要があると思います。

$("#container .pageLeft").css("margin-right", "5%"); 
$("#container .pageRight").css("margin-left", "5%"); 

EDIT次に、あなたが何度も何度もマージンを計算する必要はありません。唯一のCSSで

EDIT：ページを中央に算出したマージンの目的は

#container .pageLeft { 
    margin-right: 5%; 
} 
#container .pageRight { 
    margin-left: 5%; 
}