jQuery CSS系メソッド

css

指定した要素のCSSスタイルを取得または変更・追加する．
取得
指定する要素のCSSスタイルを取得したい場合は，引数に取得したいプロパティの値を入れることで，すでに設定されているプロパティの値を取得できる．

//基本形
var style = $('selector').css('propertyName');

//例
var style = $('p').css('color')  // pタグの要素の色を取得

変更
cssの変更や追加を行う場合，CSSのプロパティと値を引数で指定する．すでに設定されている場合は，その設定を上書きする．

//基本形
$('selector').css('propertyName','value');

//例
//javascript
$('p').css('color','#f00'); // pタグの要素を赤色に変える

• selector: CSSプロパティを取得または設定する要素を指定する．
• propertyName: 取得または設定したいCSSプロパティ名を指定する．
• value: CSSプロパティに設定する値を指定する．

width

指定した要素の幅を取得または設定する．
取得

//基本形
var elementWidth = $('selector').width();

//例
var elementWidth = $('p').width(); 

設定

//基本形
$('selector').width('value');

//例
$('p').width(200); // pタグの要素の幅を200pxに変更する

• selector：幅を取得または設定する要素を指定する．
• value:設定する要素の幅を指定する．ピクセル値となる．

height

指定した要素の高さを取得または設定する．
取得

//基本形
var elementHeight = $('selector').height();

//例
var elementHidth = $('p').height(); 

設定

//基本形
$('selector').height('value');

//例
$('p').height(200); // pタグの要素の高さを200pxに変更する

• selector：高さを取得または設定する要素を指定する．
• value：設定する要素の高さを指定する．ピクセル値となる．

innerWidth

指定した要素のpaddingを含んだ幅を取得する．

//基本形
var elementWidth = $('selector').innerWidth();

//例
var elementWidth = $('p').innerWidth(); 

• selector：paddingを含めた幅を取得または設定する要素を指定する．

通常のwidthとの違いは，指定した要素のpaddingを含めた幅を取得する．
valueを指定することで，設定することもできるが，基本的に要素の幅の設定はwidthを使う．

innerHeight

指定した要素のpaddingを含んだ高さを取得する．

//基本形
var elementWidth = $('selector').innerHeight();

//例
var elementWidth = $('p').innerHeight(); 

• selector：paddingを含めた高さを取得または設定する要素を指定する．

通常のheightとの違いは，指定した要素のpaddingを含めた高さを取得する．
valueを指定することで，設定することもできるが，基本的に要素の高さの設定はheightを使う．

outerWidth

指定した要素のpaddingとborderを含んだ幅を取得する．

//基本形
var elementWidth = $('selector').outerWidth();

//例
var elementWidth = $('p').outerWidth(); 

• selector：paddingとborderを含めた幅を取得または設定する要素を指定する．

通常のwidthとの違いは，指定した要素のpaddingとborderを含めた幅を取得する．
valueを指定することで，設定することもできるが，基本的に要素の幅の設定はwidthを使う．

outerHeight

指定した要素のpaddingとborderを含んだ高さを取得する．

//基本形
var elementWidth = $('selector').outerHeight();

//例
var elementWidth = $('p').outerHeight(); 

• selector：paddingとborderを含めた高さを取得または設定する要素を指定する．

通常のheightとの違いは，指定した要素のpaddingとborderを含めた高さを取得する．
valueを指定することで，設定することもできるが，基本的に要素の高さの設定はheightを使う．