（jQueryの学習）CSS：プロパティを操作する／cssメソッド／複数のプロパティを取得する（その１）

引き続き、CSSのプロパティを操作する方法を学びます。

本日は「2.複数のCSSプロパティを取得する」です。

2.複数のCSSプロパティを取得する

2-1.cssメソッド【返却値(文字列) = 要素.css(プロパティ)】で複数要素のプロパティ値は習得できるか？

1-1.で使用したcssメソッドは1つの要素に対するプロパティしか返却しません。
仮に該当する要素が複数存在した場合はどうなるのか？を見てみます。

『fontタグで定義されている2つの要素を参照する』↓のサンプルを操作すると、「20px」が返却されました。
これは1つ目のfontタグのプロパティ値であることがわかります。
つまり、複数の要素が該当する場合は1つ目の値しか返却しない仕様であることがわかります。

サンプルソース

// HTML
<input type="button" value="ボタンを押すと、指定した要素とそのプロパティが表示されます"><br>
<div class="box-test-area">
  <font class="css1-char1">【テキスト１】</font>　<font class="css1-char2">【テキスト２】</font><br>
</div>

// CSS
/* テキスト１ */
.css1-char1 {font-size: 20px; font-weight: bold; color: green;}
/* テキスト２ */
.css1-char2 {font-size: 80%; color: red; font-style: italic;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    /* サンプル：「テキスト１」と「テキスト２」のフォントサイズを取得する */
    alert("[" + $("font").css("font-size") + "]");
  });
});

実装例

指定した要素に設定されているプロパティを取得します。

要素: fontタグ 　プロパティ: font-size（サイズ）

【テキスト１】　【テキスト２】

前回の方法では複数のCSSプロパティは取得できませんでした。
次回はやり方を少し変えてみます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share