こんにちは。
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ベストアンサー
- 回答日時:
具体的に、どのようなタイミングでどのようなスタイルを適用したいかを示されたほうが適切なアドバイスが得られます。
『”クラス”というのは、あくまでセレクタであり、スタイルシートで設定する
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
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liリストタグの背景色に色がつ...
-
個別にリンクの色を変える方法
-
一部のリンクの下線を消す
-
サイトにjQueryが使用されてい...
-
CSSでid名やclass名に「_」や「...
-
最近、HTMLのヘッダーをIDで定...
-
外部css定義したclassをht...
-
idの中のid指定
-
ページの左右の余白(枠外)に...
-
<span>で2重にかけているものを...
-
webサイト印刷時に特定の画像を...
-
リンク文字の 一部だけ色を変...
-
印刷曜CSSがどこかおかしい・・...
-
FC2掲示板をトピック一覧表示型...
-
htmlの文字が縦書きになる
-
「諸要素」とはどういう意味で...
-
中点「・」の改行について
-
番号付きリスト(<Ol><Li>・・...
-
画像の横に文字をうまく配置で...
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
htmlのid属性って必要なの?
-
最近、HTMLのヘッダーをIDで定...
-
HTML要素のid/class名の長さに...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
サイトにjQueryが使用されてい...
-
ページの左右の余白(枠外)に...
-
CSS, リンクの色を一部変えるに...
-
透過背景を解除するにはどうす...
-
<span>で2重にかけているものを...
-
idの中のid指定
-
display:table-cell内でこんな...
-
CSSが効かずどのように指定すれ...
-
スタイルシートで、id属性の中...
-
【VBA/HTML】IE画面内のページT...
-
brにクラスをつけてcssでdispla...
-
外部css定義したclassをht...
-
CSS内で使われる山括弧の意味が...
おすすめ情報