.css()【スタイルプロパティ 取得・設定】

メモ

  • スタイルプロパティ 取得
    • 最初の要素のみ対象
    • CSSプロパティ名は、CSS と DOM の両方の書式が有効、但し大文字・小文字の区別あり (例： "background-color" ・ "backgroundColor" )
    • ブラウザにより違った値が取得される場合が有り (例：色 "#FFF"・"#ffffff"・"rgb(255,255,255)" )
    • ショートハンドプロパティ (例：margin・background・border) の動作保証はない為、個別に指定
      (例："border-width" → "borderTopWidth"・"borderBottomWidth" 等 )
  • スタイルプロパティ 設定
    • 要素のstyleプロパティを設定 (例：～.style.color = "green")
    • CSSプロパティ名は、CSS と DOM の両方の書式が有効 (例： "background-color"・"backgroundColor" )
      連想配列の場合、DOM 書式のクォーテーションは省略可能 (例： backgroundColor)
    • プロパティ値が数値の場合、文字列に変換し "px" を追加
    • プロパティ値が空文字列 ("") の場合、削除 (CSS 設定を除く)
    • !important 宣言は無視
    • 相対値の指定可 (例："+=15"・"-=15") 1.6

構文

説明構文戻り値
スタイルプロパティ 取得 .css( propertyName ) 1.0

String propertyName：CSSプロパティ名
String
.css( propertyNames ) 1.9

Array propertyNames：CSSプロパティ名 配列
String
スタイルプロパティ 設定 .css( propertyName, value ) 1.0

String propertyName：CSSプロパティ名
String または Number value：プロパティ値
jQuery
.css( propertyName, function ) 1.4

String propertyName：CSSプロパティ名
function：
引数説明
Integer indexインデックス (0～)
String value元のプロパティ値
戻り値説明
String または Number設定するプロパティ値
jQuery
.css( properties ) 1.0

PlainObject properties：{ プロパティ名: プロパティ値 } のオブジェクト
jQuery

関連

例

<style>
.class11 { border:1px black solid; color:white; width:150px; height:50px; margin:5px; padding:10px; float:left; }
</style>

<div id="id1" style="height:160px;">
  <div style="height:70px">
    <div class="class11" id="id11" style="background-color:red;">red</div>
    <div class="class11" id="id12" style="background-color:green;">green</div>
    <div class="class11" id="id13" style="background-color:blue;">blue</div>
  </div>
  <br>
  <div style="height:70px">
    <div class="class11 class12" id="id14"></div>
    <div class="class11 class12" id="id15"></div>
    <div class="class11 class12" id="id16"></div>
  </div>
  <br>
</div>
<p id="out1" style="border:1px black solid; padding:5px;">出力</p>

<script>
var style;
// 上段処理
style = $( "#id1 .class11" ).css( /* CSS 書式 */"background-color" ); // 最初の要素のみ対象
$( "#id11" ).append("<br>" + style);
style = $( "#id12" ).css( /* DOM 書式 */"backgroundColor" );
$( "#id12" ).append("<br>" + style);
style = $( "#id13" ).css( "background-color" );
$( "#id13" ).append("<br>" + style);

style = $( "#id13" ).css( [ /* CSS 書式 */"background-color", /* DOM 書式 */"backgroundColor", "width", "height" ] );
var out = "";
$.each( style, function( prop, value ) {
  out += prop + "：" + value + "<br>";
});
// 取得値 出力
$( "#out1" ).html(out);

// 下段処理
$( "#id14" ).css( /* CSS 書式 */"background-color", "red" );
$( "#id15" ).css( /* DOM 書式 */"backgroundColor", "green" );
$( "#id16" ).css( {
  /* CSS 書式 */"background-color":"blue",
  /* DOM 書式 (1) */"borderLeft":"4px red dashed",
  /* DOM 書式 (2) */borderRight:"4px red dashed"
} );

$( ".class12" ).css( "width", function(index, value) {
  $( this ).text("[" + index + "]");
  return (index + 1) * 50;
});

</script>

id11 (class11)
red
id12 (class11)
green
id13 (class11)
blue

id14
(class11 class12)
id15
(class11 class12)
id16
(class11 class12)

出力