
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
jQuery
2018.03.16
jQuery は セレクタで対象となる要素を特定するので、同じようにセレクタを使用する CSS と相性が良く、シンプルな記述で CSS を動的に設定することができます。
今回は、jQuery を使用して CSS の設定を行う方法を紹介したいと思います。
jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する(本ページ)
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル
jQuery【 CSS 】プロパティの値を取得するサンプル
jQuery【 CSS 】!important で優先度を変更するサンプル
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル
1.jQuery で CSS を設定
2.css メソッド
3.addClass メソッド
4.removeClass メソッド
jQuery は CSS と同様にセレクタで HTML要素を特定するので、CSS の設定もスムーズに行うことができます。
jQuery では、主に次のメソッドを使用して CSS の設定を行います。
●css( )
style 属性を直書きする場合に使用●addClass( )
既存の CSS クラスを追加する場合に使用●removeClass( )
既存の CSS クラスを削除する場合に使用
jQuery で style 属性を直書きする形で CSS の設定を行う場合は、css メソッドを使用して 次のように記述します。
$("div").css("width", "300px");
css メソッドの 第1引数にプロパティ名を 第2引数に値を 記述して、CSS プロパティの値を設定することができます。
第2引数に数値を設定する場合は、引用符( ” ” や ‘ ‘ )無しでもOKです。
次のように記述して 複数の CSS を設定することもできます。
$("div").css({"width":"300px", "height":"50px"});
算術複合代入子を利用して CSS プロパティの値を設定することができます。
算術複合代入子を使用する場合は、次のように記述します。
$("div").css("width", "+=10");
上のサンプルでは、jQuery が実行される度に div要素の幅が 10px ずつ増加します。
「 += 」のような算術複合代入子を使用する場合は、引用符( ” ” や ‘ ‘ )を付けて値を設定する必要があります。
次のように記述して 複数の CSS プロパティをまとめて設定することもできます。
$("div").css(wkCss); wkCss = new Object(); wkCss.width = 300; wkCss.height = 50; wkCss.backgroundColor = "gray";
css メソッドの第2引数に ユーザ定義関数を設定することもできます。
ユーザ定義関数を設定する場合は、次のように記述します。
$("div").css("height", funcCss); function cssFunc(index){ return (index+1)*20; }
ユーザ定義関数 cssFunc は、インデックス番号に 1 足した数値に 20 をかけた値を返す関数ですので、この jQuery が実行される度に div要素の高さが 20px、40px、60px、 と変化します。
css メソッドで設定したCSS の設定は、空の文字列を設定すると削除できます。
$("div").css("width", "");
但し、この方法は、css メソッドで設定したCSS に対してのみ有効ですのでご注意下さい。
CSS が設定されているクラスを指定して jQuery で CSS を設定することができます。
クラスを指定し CSS を設定する場合は、addClass メソッドを使用して次のように記述します。
$("div").addClass("width300");
.width300 { width:300px; }
上のサンプルでは、jQuery が実行されると div要素の幅が 300px になります。
CSS が設定されているクラスを指定して jQuery で CSS を削除することができます。
クラスを指定し CSS を削除する場合は、removeClass メソッドを使用して次のように記述します。
$("div").removeClass("width300");
.width300 { width:300px; }
上のサンプルでは、jQuery が実行されると div要素の幅が ブラウザ依存のデフォルト幅 になります。
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.