LoginSignup
0
1

jQuery CSS系メソッド

Last updated at Posted at 2023-07-31

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を使う.

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1