こちらではjQueryのメソッドのうち、スタイル(CSS)の取得や設定をするメソッドについて解説しています。
目次
- jQueryのスタイル(CSS)の取得や設定をするメソッド一覧
- css(name) cssの値を取得
- css(name, value) cssに値を設定
- css(map) オブジェクト形式でcssを設定
- width() 幅を取得
- width(value) 幅の値を設定
- height() 高さを取得
- height(value) 高さの値を設定
- innerWidth() paddingを含む内部幅を取得
- innerHeight() paddingを含む内部高を取得
- scrollTop() スクロールバーの上位置を取得
- scrollTop(value) スクロールバーの上位置を設定
- scrollLeft() スクロールバーの左位置を取得
- scrollLeft(value) スクロールバーの左位置を設定
- offset()
- position()
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,104
、88,176
のように表示されます。※数値は環境によります。