【JavaScript 練習講座】DOMのスタイルを変更する
[JavaScript 練習講座]DOMのスタイルを変更する
本講座では、タグのスタイルを変更する方法を学習する。 「タグのスタイル」と一言で言ってみたものの、 「タグのスタイル」は、背景色やら文字の色やら多種多様に存在する。 これら全てをここで学習するわけではない。 スタイルを変更するサンプルプログラムを3つ紹介する。 サンプルプログラムを理解する事により、 他のスタイルの変更方法も理解できるだろう（ネットで調べる事ができるだろう）。
タグの背景色を変更する
タグの背景色を変更するサンプルプログラムを掲載する。
001<html>
002<head>
003<script>
004
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012}
013
014</script>
015</head>
016<body>
017 <div id = "test" >Hello</div>
018 <a href="javascript:clickLink()" >Click</a>
019</body>
020</html>
002<head>
003<script>
004
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012}
013
014</script>
015</head>
016<body>
017 <div id = "test" >Hello</div>
018 <a href="javascript:clickLink()" >Click</a>
019</body>
020</html>
Hello
Click
Hello
Click
背景色を青色に変更するプログラムである。 解説する。まずWebブラウザでファイルを開くと、 文字列「Hello」と「Click」リンクが表示する。 Clickリンクをクリックすると、文字列「Hello」の背景色が青色になる。 HTMLを解説する。
016<body>
017 <div id = "test" >Hello</div>
018 <a href="javascript:clickLink()" >Click</a>
019</body>
020</html>
017 <div id = "test" >Hello</div>
018 <a href="javascript:clickLink()" >Click</a>
019</body>
020</html>
17行目でdivタグを利用して、文字列「Hello」を表示する。
divタグにid属性を設定して、値に「test」を記述した。
JavaScriptで、このidの値を利用する。
18行目でClickリンクを表示する。
Clickリンクのhref属性の値は、
javascript:clickLink() である。
Clickリンクをクリックすると、clickLink()関数が実行する。
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012}
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012}
clickLink()関数を解説する。 8行目でdocumentオブジェクトのgetElementById()関数を実行して、 戻り値を変数divに代入する。 divには、「Hello」が表示しているdivタグが代入される。 11行目でdivタグのスタイルを変更する。
タグのCSS変更 タグオブジェクト.style.[プロパティ] = [値] ;
タグのスタイルを変更する場合、タグのstyleプロパティの、さらに、 変更したいCSSプロパティを指定する。 今回、10行目で、
011div.style.background = "blue" ;
このように、styleの後ろに背景を意味するbackgroundプロパティを指定する。 そして、そのbackgroundプロパティに「blue」を代入する。 つまり、背景色が青色になる。 styleの後ろのプロパティと値は、 一般的にはCSSで設定する記述方法と同じである。 CSSでタグの背景色を設定する場合は、
CSSの背景設定 background : [色] ;
このように設定した。JavaScriptでも似たような形で設定する。 プログラムが実行すると、「Hello」のdivの背景色が青色になる。
Hello
Click
文字の色を変更する
背景色と文字の色を変更するサンプルプログラムを見る。
001<html>
002<head>
003<script>
004
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012
013 //文字の色を設定
014 div.style.color = "white" ;
015}
016</script>
017</head>
018<body>
019 <div id = "test" >Hello</div>
020 <a href="javascript:clickLink()" >Click</a>
021</body>
022</html>
002<head>
003<script>
004
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012
013 //文字の色を設定
014 div.style.color = "white" ;
015}
016</script>
017</head>
018<body>
019 <div id = "test" >Hello</div>
020 <a href="javascript:clickLink()" >Click</a>
021</body>
022</html>
Hello
Click
Hello
Click
Clickリンクをクリックすると、背景色が青色になり、文字の色が白色になるように
プログラムする。
サンプルプログラムを解説する。
19行目で、divタグを利用して文字列「Hello」を表示する。
divのid属性に「test」を設定する。
20行目のClickリンクのhref属性は、
「javascript:clickLink()」なので、
ClickリンクをクリックするとclickLink()関数が実行する。
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012
013 //文字の色を設定
014 div.style.color = "white" ;
015}
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //背景を設定
011 div.style.background = "blue" ;
012
013 //文字の色を設定
014 div.style.color = "white" ;
015}
clickLink()関数を解説する。8行目でdocumentオブジェクトのgetElementById()関数を実行して、 idが「test」のタグを取得し、変数divへ代入する。 「Hello」が記載されたdivタグが、変数divに入る。 11行目で、背景色を「青色」へ変更する。 14行目で、文字の色を「白色」へ変更する。
014div.style.color = "white" ;
文字の色を変更するプログラムである。
文字色を変更 タグオブジェクト.style.color = [値] ;
このようにプログラムを記述する。 CSSで文字の色を指定する場合
color : [値] ;
このように設定した。JavaScriptもCSSも似ている。 以上にて、「Hello」の文字の色が白色へ変更する。
Hello
Click
タグの表示設定を切り替える
特定のタグを表示したり、非表示にしたりするサンプルプログラムを掲載する。
001<html>
002<head>
003<script>
004
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //非表示の場合
011 if ( div.style.display == "none" ) {
012
013 //表示する
014 div.style.display = "block" ;
015
016 } else {
017 //表示している場合は非表示
018 div.style.display = "none" ;
019 }
020}
021</script>
022</head>
023<body>
024 <a href="javascript:clickLink()" >Click</a>
025 <div id = "test" >Hello</div>
026 <div>IORI</div>
027</body>
028</html>
002<head>
003<script>
004
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //非表示の場合
011 if ( div.style.display == "none" ) {
012
013 //表示する
014 div.style.display = "block" ;
015
016 } else {
017 //表示している場合は非表示
018 div.style.display = "none" ;
019 }
020}
021</script>
022</head>
023<body>
024 <a href="javascript:clickLink()" >Click</a>
025 <div id = "test" >Hello</div>
026 <div>IORI</div>
027</body>
028</html>
Click
Hello
IORI
Clickリンクをクリック
Click
IORI
もう一度Clickリンクをクリック
Click
Hello
IORI
文字列「Hello」が表示している状態でClickリンクをクリックすると、
文字列「Hello」が非表示になり、
文字列「Hello」が非表示の状態でClickリンクをクリックすると、
文字列「Hello」が表示する。
プログラムを解説する。
今回、文字列「Hello」に対してDOM操作を行なう。
文字列「Hello」のdivタグのidは「test」である。
さて、Clickリンクをクリックすると clickLink() 関数が実行する。
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //非表示の場合
011 if ( div.style.display == "none" ) {
012
013 //表示する
014 div.style.display = "block" ;
015
016 } else {
017 //表示している場合は非表示
018 div.style.display = "none" ;
019 }
020}
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //非表示の場合
011 if ( div.style.display == "none" ) {
012
013 //表示する
014 div.style.display = "block" ;
015
016 } else {
017 //表示している場合は非表示
018 div.style.display = "none" ;
019 }
020}
8行目で documentオブジェクトのgetElementById()関数を実行して、 idがtestのタグを取得し、変数divへ代入する。 idがtestのタグは文字列「Hello」が記載されたタグである。 11行目のif文で、divタグが非表示かどうか確認する。
CSSのdisplayプロパティを取得 タグオブジェクト.style.display ;
タグのCSSのdisplayの値を確認するプログラムである。 もし、「none」ならば、タグは非表示である。 その場合、ifブロックが実行して、タグを表示状態へ変更する。
005function clickLink () {
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //非表示の場合
011 if ( div.style.display == "none" ) {
012
013 //表示する
014 div.style.display = "block" ;
015
016 } else {
017 //表示している場合は非表示
018 div.style.display = "none" ;
019 }
020}
006
007 //[div]タグを取得
008 const div = document.getElementById ( "test" ) ;
009
010 //非表示の場合
011 if ( div.style.display == "none" ) {
012
013 //表示する
014 div.style.display = "block" ;
015
016 } else {
017 //表示している場合は非表示
018 div.style.display = "none" ;
019 }
020}
タグオブジェクト.style.display = "block" ;
このように記述すると、CSSのdisplayプロパティにblockが入る。
elseブロックに注目する。elseブロックは、タグが表示されている場合に実行する。
elseブロックでは、タグを非表示へ変更する処理をする。
タグオブジェクト.style.display = "none" ;
このように記述すると、タグが非表示になる。 解説は以上である。
まとめ
タグのCSS変更 タグオブジェクト.style.[プロパティ] = [値] ;
