【jQuery】スタイル(CSS)の取得や設定をするメソッド一覧

jQueryのスタイルを操作するメソッド

こちらではjQueryのメソッドのうち、スタイル(CSS)の取得や設定をするメソッドについて解説しています。

jQueryのスタイル(CSS)の取得や設定をするメソッド一覧

メソッド 解説
css(name) 選択した要素の最初の要素からnameで指定したcssの値を取得する。
css(name, value) nameで指定したcssをvalueにする。
css(map) {name:value, name:value,…}のオブジェクト形式でcssを設定する。
width() 選択した要素の最初の要素の幅(px)を取得。
width(value) 幅をvalueにする。
height() 選択した要素の最初の要素の高さ(px)を取得。
height(value) 高さをvalueにする。
innerWidth([option]) paddingを含む幅を取得。optionでmarginをtrueに指定すると、marginも含めた幅を取得。
innerHeight([option]) paddingを含む高さを取得。optionでmarginをtrueに指定すると、marginも含めた高さを取得。
scrollTop() 選択した最初の要素のスクロールバーの上位置を取得。
scrollTop(value) 選択した全ての要素のスクロールバーの上位置をvalueに設定。
scrollLeft() 選択した要素の最初の要素のスクロールバーの左位置を取得。
scrollLeft(value) 選択した全ての要素のスクロールバーの左位置をvalueに設定。
offset() 選択した最初の要素のドキュメント上での位置を取得。
position() 親要素からの相対位置を取得。

css(name) cssの値を取得

選択した要素のうち、最初の要素からnameで指定したcssの値を取得する。

css(name)の使い方

<style>
.red {
	color:#f00;
}
</style>

<p class="red">サンプルのテキスト</p>

上記のHTMLにおいて

var a = $('.red').css('color');

とするとaの値はrgb(255,0,0)となります。

css(name, value) cssに値を設定

nameで指定したcssの値をvalueに設定します。

css(name, value)の使い方

<p class="red">サンプルのテキスト</p>

上記のHTMLにおいて

$('.red').css('color','rgb(255,0,0)');

とすると「サンプルのテキスト」という文字が赤くなります。

css(map) オブジェクト形式でcssを設定

選択した要素に対して、{name:value, name:value,…}のオブジェクト形式でcssを設定します。

css(map)の使い方

<p class="marker">サンプルのテキスト</p>

上記のHTMLにおいて

$('.marker').css({
	'background-color':'yellow',
	'font-weight':'bold'
});

とすると「サンプルのテキスト」という文字が、黄色い背景の太字になります。

width() 幅を取得

選択した要素のうち、最初の要素の幅(px)を取得。

width()の使い方

<style>
#box{
	width:100px;
}
</style>

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

var a = $('#box').width();

とするとaの値は100となります。

width(value) 幅の値を設定

選択した要素の幅をvalueに設定します。

px%などの単位付きで指定します。単位を指定しな場合はpxで設定されます。

width(value)の使い方

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

$('#box').width(300);

とするとidがboxのdivの幅が300に設定されます。

height() 高さを取得

選択した要素のうち、最初の要素の高さ(px)を取得します。

height()の使い方

<style>
#box{
	height:100px;
}
</style>

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

var a = $('#box').height();

とするとaの値は100となります。

height(value) 高さの値を設定

選択した要素の高さをvalueに設定します。

px%などの単位付きで指定します。単位を指定しな場合はpxで設定されます。

height(value)の使い方

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

$('#box').height(300);

とするとidがboxのdivの高さが300に設定されます。

innerWidth() paddingを含む内部幅を取得

要素のpaddingを含む内部幅を取得します(borderは含まない)。

innerWidth()の使い方

<style>
#box{
	border:2px;
	padding:10px;
	width:100px;
}
</style>

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

var a = $('#box').innerWidth();

とするとaの値は120となります。

innerHeight() paddingを含む内部高を取得

要素のpaddingを含む内部高さを取得します(borderは含まない)。

innerHeight()の使い方

<style>
#box{
	border:10px;
	padding:10px;
	height:100px;
}
</style>

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

var a = $('#box').innerHeight();

とするとaの値は120となります。

scrollTop() スクロールバーの上位置を取得

選択した最初の要素のスクロールバーの上位置を取得します。

つまり、どのくらいスクロールしたかを表す値です。

scrollTop()の使い方

<style>
#box{
	border:10px;
	padding:10px;
	height:2000px;
}
</style>

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

$(window).scroll(function() {
	var a = $(this).scrollTop();
	console.log(a);
});

のようにすると、スクロールに合わせてコンソールにスクロールバーの上位置の情報が表示されます。

scrollTop(value) スクロールバーの上位置を設定

選択した全ての要素のスクロールバーの上位置をvalueに設定。

scrollTop(value)の使い方

<style>
#box{
	border:10px;
	padding:10px;
	height:2000px;
}
</style>

<div id="box">
	<p>サンプルのテキスト</p>
</div>

上記のHTMLにおいて

$(window).scrollTop(500);

のようにすると、スクロールの上位置が500pxに設定され自動でスクロールします。

scrollLeft() スクロールバーの左位置を取得

選択した要素のうち、最初の要素のスクロールバーの左位置を取得します。

scrollLeft()の使い方

使い方はscrollTop()と同じです。

scrollLeft(value) スクロールバーの左位置を設定

選択した全ての要素のスクロールバーの左位置をvalueに設定します。

scrollLeft(value)の使い方

使い方はscrollTop(value)と同じです。

offset()

選択した最初の要素のドキュメント上での位置を取得。

offset()の使い方

<p>サンプルのテキスト1</p>
<p>サンプルのテキスト2</p>
<p id="text3">サンプルのテキスト3</p>

上記のHTMLにおいて

var a = $('#text3').offset();
console.log(a.top + ',' + a.left);

とすると136,8のように表示されます。※数値は環境によります。

position()

親要素からの相対位置を取得します。

position()の使い方

<ul>
	<li>りんご</li>
	<li>みかん</li>
	<li id="melon">メロン</li>
	<ul>
		<li>肥後グリーンメロン</li>
		<li>らいでんメロン</li>
		<li id="tsugarian">つがりあんメロン</li>
	</ul>
</ul>

上記のHTMLにおいて

var a = $('#melon').position();
var b = $('#tsugarian').position();
console.log(a.left + ',' + a.top);
console.log(b.left + ',' + b.top);

のようにすると、48,10488,176のように表示されます。※数値は環境によります。

[prism]