jQuery で css の値を操作するには css() メソッドを使います。
追加、変更は
|
1 2 3 4 |
$('要素').css('プロパティ', '値') // 複数の場合 $('要素').css({'プロパティ':'値', 'プロパティ':'値'}) |
削除（スタイルシートの値に戻す）は
|
1 2 3 4 |
$('要素').css('プロパティ', '') // 複数の場合 $('要素').css({'プロパティ':'', 'プロパティ':''}) |
取得は
|
1 2 3 4 5 |
var val = $('要素').css('プロパティ') // 複数の場合 var obj = $('要素').css(['プロパティ', 'プロパティ']) obj.プロパティ // 値にアクセス |
- 目次 -
スポンサーリンク
追加、変更、削除
デモ
ボタンを押すと、background-color または width の値が追加・変更・削除されます。
色 :
幅 :
幅 :
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script type='text/javascript'> $(function(){ // 赤 $('#button1').click(function () { $('#div1').css('background-color', '#f00'); }); // 緑 $('#button2').click(function () { $('#div1').css('background-color', '#0f0'); }); // もとに戻す（色） $('#button3').click(function () { $('#div1').css('background-color', ''); }); // 大 $('#button4').click(function () { $('#div1').css('width', '200px'); }); // 小 $('#button5').click(function () { $('#div1').css('width', '50px'); }); // もとに戻す（幅） $('#button6').click(function () { $('#div1').css('width', ''); }); }); </script> <style type='text/css'> #div1 { width : 100px; height : 100px; border : solid 1px #000; } </style> </head> <body> <span style="font-size:15px;">色 : </span> <button id='button1' >赤</button> <button id='button2' >緑</button> <button id='button3' >もとに戻す</button> </br> <span style="font-size:15px;">幅 : </span> <button id='button4' >大</button> <button id='button5' >小</button> <button id='button6' >もとに戻す</button> </br></br> <div id='div1'></div> </body> </html> |
ポイントを抜粋
background-color、width を追加・変更・削除する部分の抜粋です。
|
1 2 3 4 5 6 7 8 9 10 11 |
// ① 追加・変更 $('#div1').css('background-color', '#f00'); // ② 削除 $('#div1').css('background-color', ''); // ③ 変更（スタイルシートの値を書きかえ） $('#div1').css('width', '200px'); // ④ 削除（スタイルシートの値に戻す） $('#div1').css('width', ''); |
width の場合、スタイルシートに値が指定してあります。その値を ③ で書きかえ、④ でもとに戻しています。
取得
デモ
ボタンを押すと、width または height の値を取得し、10px 加算してセットします。
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script type='text/javascript'> $(function(){ // width $('#button1b').click(function () { var w = $('#div2').css('width'); w = parseInt(w) + 10 + 'px'; $('#div2').css('width', w); }); // height $('#button2b').click(function () { var h = $('#div2').css('height'); h = parseInt(h) + 10 + 'px'; $('#div2').css('height', h); }); }); </script> <style type='text/css'> #div2 { width : 50px; height : 50px; background-color : #0f0; border : solid 1px #000; } </style> </head> <body> <button id='button1b' >広げる (width)</button> <button id='button2b' >広げる (height)</button> </br></br> <div id='div2'></div> </body> </html> |
ポイントを抜粋
width を取得し、10px 加算してセットする箇所です。
|
1 2 3 4 5 6 7 8 |
// ① 取得 var w = $('#div2').css('width'); // ② 加算 w = parseInt(w) + 10 + 'px'; // ③ セット $('#div2').css('width', w); |
① で所得した w には、末尾に ‘px’ がついています。② のparseIntを通すことで ‘px’ が除去されます。
複数まとめて
複数のプロパティをまとめて取得、変更します。
デモ
ボタンを押すと、width と height の値をまとめて取得し、10px 加算してセットします。
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script type='text/javascript'> $(function(){ // 広げる $('#button1c').click(function () { var obj = $('#div3').css(['width', 'height']); var w = parseInt(obj.width) + 10 + 'px'; var h = parseInt(obj.height) + 10 + 'px'; $('#div3').css({'width' : w , 'height' : h}); }); // もとに戻す $('#button2c').click(function () { $('#div3').css({'width' : '' , 'height' : ''}); }); }); </script> <style type='text/css'> #div3 { width : 50px; height : 50px; background-color : #0f0; border : solid 1px #000; } </style> </head> <body> <button id='button1c' >広げる（width height）</button> <button id='button2c' >もとに戻す</button> </br></br> <div id='div3'></div> </body> </html> |
ポイントを抜粋
width と height をまとめて取得し、10px 加算してセットする箇所です。
|
1 2 3 4 5 6 7 8 9 10 11 |
// ① まとめて取得 var obj = $('#div3').css(['width', 'height']); // ② width に加算 var w = parseInt(obj.width) + 10 + 'px'; // ③ height に加算 var h = parseInt(obj.height) + 10 + 'px'; // ④ まとめてセット $('#div3').css({'width' : w , 'height' : h}); |
① の取得結果はオブジェクトで、以下のようにセットされています。
|
1 |
{width: "50px", height: "50px"} |
したがって、obj.width obj.heightの形式で値にアクセスできます。