jQueryにおけるハイフン付きCSSプロパティ
CSSでは一般的な、ハイフンで区切られた複数の単語からなるプロパティがあるとします:
<p class="www">text</p>
その場合、何の問題もありません。JavascriptコードでもCSSと同じように記述できます:
$('.www').css('font-size', '20px');
複数のCSSプロパティを設定したい場合は、cssメソッドにオブジェクトを引数として渡すことができます。このオブジェクトのキーはCSSプロパティ、値はCSSプロパティの値になります:
$('.www').css({color: 'red', font: '12px Arial'});
しかし、font-sizeのようなプロパティでは問題が発生します。font-sizeではなく、fontSizeと記述する必要があります:
$('.www').css({color: 'red', fontSize: '12px'});
この方法が好ましくない場合は、キーfont-sizeを引用符で囲んでください:
$('.www').css({color: 'red', 'font-size': '12px'});
ご覧の通り、jQueryはあなたの好みに応じてさまざまなメソッドの使用法を提供しています。あなたにとって使いやすい方法を使用してください。
すべてのh3要素のテキストを太字で緑色にしてください。
すべてのh2要素の色を水色にし、font-sizeを30pxに設定してください。