[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME > リファレンス > jQuery > jQuery API一覧 > jQuery CSS > .css()
.css()
jQueryオブジェクトが保持しているDOM要素にCSSを設定したりする。いろいろとパターンがある。
.css( propertyName )
引数
- (String)propertyName
- CSSプロパティ名
戻り値
- String
- 数値であっても型はString
propertyNameで指定したCSSのプロパティの値を取得する。
サンプル
実行結果
- param()テスト
- param()テスト
- param()テスト
- param()テスト
Javascript
- var t = '';
- $('.jqTest1 li').each(function(){
- t += $(this).css('background-color') + '<br />';
- });
- $('.jqTest1 .execute').click(function(){
- $('.jqTest1').append(t);
- });
HTML
- <div class="jqTest1">
- <input type="button" value="execute" class="execute cq-btn m-primary" />
- <ul>
- <li style="background-color:blue;">param()テスト</li>
- <li style="background-color:rgb(15,99,30);">param()テスト</li>
- <li style="background-color:#123456;">param()テスト</li>
- <li style="background-color:#f11;">param()テスト</li>
- </ul>
- </div>
.css( map )
引数
- (object) Map
- キー/値のペア(ハッシュ)
戻り値
- jQuery
- jQueryオブジェクト
jQueryオブジェクトのCSSをキー/値を持つハッシュで設定する。まとめて設定できるので便利。
複数単語のプロパティ名(border-leftなどハイフンで区切られてるやつ)は、キーを''で囲まないと認識しない。ただ面倒なのでLCCで記述することがおおい。
またプロパティの値を空にすると設定値が初期設定に戻る。
サンプル
実行結果
- css(properties)テスト
Javascript
- $('.jqTest2 .execute1').click(function(){
- $('.jqTest2 li').css( { color: '#FFFFFF', 'background-color': '#000000' });
- });
- $('.jqTest2 .execute2').click(function(){
- $('.jqTest2 li').css( { color: '#FFFFFF', backgroundColor: '#CC9900' });
- });
- $('.jqTest2 .execute3').click(function(){
- $('.jqTest2 li').css( { color: '', backgroundColor: '' });
- });
HTML
- <div class="jqTest2">
- <input type="button" value="execute1" class="execute1 cq-btn m-primary" />
- <input type="button" value="execute2" class="execute2 cq-btn m-primary" />
- <input type="button" value="execute3" class="execute3 cq-btn m-primary" />
- <ul>
- <li>css(properties)テスト</li>
- </ul>
- </div>
.css( propertyName, value )
引数
- (String)propertyName
- CSSのプロパティ名
- (String|number) value
- CSSプロパティの値
戻り値
- jQuery
- jQueryオブジェクト
propertyNameとvalueでCSSの設定をおこなう。
サンプル
実行結果
- border
- background
- color
Javascript
- $('.jqTest3 li').each(function(i){
- if (i == 0) {
- $(this).mouseover(function(){
- $(this).css('border', '1px solid #000000');
- });
- } else if (i == 1) {
- $(this).mouseover(function(){
- $(this).css('background-color', '#CCCCCC');
- });
- } else if (i == 2) {
- $(this).mouseover(function(){
- $(this).css('color', '#00FFFF');
- });
- }
- });
HTML
- <div class="jqTest3">
- <ul>
- <li>border</li>
- <li>background</li>
- <li>color</li>
- </ul>
- </div>
1.4からvalueに関数を設定できるようになった。関数を設定した場合、第一引数にはindex、第二引数には設定しようとしているCSSプロパティの現在の値が渡される。 関数内でthisはCSSを設定するDOM要素となるのでCSSの設定以外も出来たりする。まぁわかりにくいコードになるだけの気もしますがw
さらにjQuery 1.6からは.animate()で利用されるような、現在の値に加算(+=)、減算(-=)ができるようになった。
サンプル
実行結果
- css(properties)テスト1
- css(properties)テスト2
- css(properties)テスト3
- css(properties)テスト4
- css(properties)テスト5
- css(properties)テスト6
Javascript
- $('.jqTest4 li').css({
- display: 'inline-block',
- width: '100px',
- margin: '10px',
- backgroundColor: '#E5E5E5'
- });
- $('.jqTest4 .execute1').click(function(){
- $('.jqTest4 li').css('height', function(index, height){
- $(this).css('width', function(index2){
- return '-=' + 10;
- });
- $(this).click(function(e){
- alert($(e.target).height());
- });
- return '+=' + index * 10;
- });
- });
HTML
- <div class="jqTest4">
- <input type="button" value="execute1" class="execute1 cq-btn m-primary" />
- <ul>
- <li>css(properties)テスト1</li>
- <li>css(properties)テスト2</li>
- <li>css(properties)テスト3</li>
- <li>css(properties)テスト4</li>
- <li>css(properties)テスト5</li>
- <li>css(properties)テスト6</li>
- </ul>
- </div>