JqueryでCSSの設定値を変更する

質問

こんにちは。

JqueryもしくはjavascriptでCSSの操作を行いたいのですが、

CSSの設定値そのものを変更させ、保持することは出来るのでしょうか。

例えば、以下のようなCSS設定があり、
p.class-abc{
line-height : 120%;
}

描画されている<p class = "class-abc">***</p>に対して、

$('p.class-abc').css({'line-height' : '200%'});とすると、

firebugsで見る限り、

描画されている<p>に対してstyle属性を付与し、line-heightの値を上書きしているように見えます。

私がやりたいのは、

「.class-abc」をあるイベントで「line-height : 200%」に変更して保持し、（これを(1)とします。）

その後、あるイベントに連動して、例えば$('p.#zyx').addClass('.class-abc');とした時に、

line-height : 200%である.class-abcを付与したいということなんですが・・・。

この質問を書いていて思ったのですが、

”クラス”というのは、あくまでセレクタであり、スタイルシートで設定する

p.class-abc{
line-height : 120%;
}

のような記述は、何らかのオブジェクトとしてブラウザに保持されるものでは無いということでしょうか。

雑多な質問になってしまいましたがご教授頂けますと幸いです。

宜しくお願い申し上げます。

回答No.1

ORUKA1951 · ベストアンサー

具体的に、どのようなタイミングでどのようなスタイルを適用したいかを示されたほうが適切なアドバイスが得られます。

『”クラス”というのは、あくまでセレクタであり、スタイルシートで設定する
p.class-abc{line-height : 120%;}
のような記述は、何らかのオブジェクトとして・・・』

　p.class-abcは、「class_abcに所属するタイプセレクタpに対して」と言う意味で、詳細度は、{0,0,1,1}です。それに対して、p.#zyx.class_abc{};と言う記述は、一意セレクタzyxを持ち、かつクラスclass_abcに所属するタイプセレクタpですから、詳細度は{0,1,1,1}です。
　単なると言っても、「タイプセレクタ+クラスセレクタ」です。

　通常は一意セレクタは、それ自体大きな詳細度を持ちますから、単に一意セレクタで指定するだけで十分です。javascriptのDocumentWrightで
<p class="class_name">を<p class="class_name" id="IDname">とするだけで済むはずです。
　子孫セレクタや子供セレクタ、隣接セレクタ、擬似クラスセレクタ、擬似要素セレクタなどをうまく使いましょう。

　元々一意セレクタは詳細度が高いので、単に#yzxだけで良いです。

　また、スタイルのためにHTMLにIDを追加するのは感心しません。詳細度が高いため、カスケーディングがうまく利用できなくてHTMLやCSSが煩雑で複雑になるだけです。

　基本的にスタイルシートは一度しか読みませんから、スタイルシートを書き換えるのは非効率です。

　イベントの種類にもよりますが、スタイルシートには「動的な擬似クラス---詳細度C=1」や、「擬似要素---詳細度d=1」が用意されています。これらを使って、ある程度のことはできるはずです。

　どういうタイミングで、どんなイベントを起こしたいのか・・・・。

お礼

詳しい解説をありがとうございます。

おっしゃる内容でなんとなく目星が付きました。

ご丁寧にありがとうございました。m(_ _)m