特定の色をクリックすることで、特定の要素の背景色を、クリックした特定の色に変更するサンプル。
クリックしたとき、changeBackgroundColor 関数を呼び出す。引数には、背景色を変えたい要素のIDと、背景色を指定する。
実装例
- Black
- Purple
- Red
- Blue
- Green
- Orange
- Pink
- Lime
- Aqua
- Yellow
- Beige
特定の色をクリックすると、ここの背景色を変更する。
実装例の動作について
「Black」と書かれた黒色の部分をクリックすると、ベージュの背景色が黒色に変わる。
他の色も同様にクリックで動作する。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){
document . getElementById( id ) . style . backgroundColor = color;
}
// -->
</script>
<!--
function changeBackgroundColor( id, color ){
document . getElementById( id ) . style . backgroundColor = color;
}
// -->
</script>
CSS
<style type="text/css">
<!--
ul#change-background-color {
list-style-type: none;
}
ul#change-background-color li {
float: left;
margin: 0px;
padding: 0px;
width: 50px;
text-align: center;
font-size: 10px;
cursor: pointer;
}
-->
</style>
<!--
ul#change-background-color {
list-style-type: none;
}
ul#change-background-color li {
float: left;
margin: 0px;
padding: 0px;
width: 50px;
text-align: center;
font-size: 10px;
cursor: pointer;
}
-->
</style>
HTML
<div id="cbc" style="background-color:beige;height:150px;">
<ul id="change-background-color">
<li style="background-color:black;color:white;" onClick="changeBackgroundColor( 'cbc', 'black' )">Black</li>
<li style="background-color:purple;color:white;" onClick="changeBackgroundColor( 'cbc', 'purple' )">Purple</li>
<li style="background-color:red;color:white;" onClick="changeBackgroundColor( 'cbc', 'red' )">Red</li>
<li style="background-color:blue;color:white;" onClick="changeBackgroundColor( 'cbc', 'blue' )">Blue</li>
<li style="background-color:green;color:white;" onClick="changeBackgroundColor( 'cbc', 'green' )">Green</li>
<li style="background-color:orange;color:black;" onClick="changeBackgroundColor( 'cbc', 'orange' )">Orange</li>
<li style="background-color:pink;color:black;" onClick="changeBackgroundColor( 'cbc', 'pink' )">Pink</li>
<li style="background-color:lime;color:black;" onClick="changeBackgroundColor( 'cbc', 'lime' )">Lime</li>
<li style="background-color:aqua;color:black;" onClick="changeBackgroundColor( 'cbc', 'aqua' )">Aqua</li>
<li style="background-color:yellow;color:black;" onClick="changeBackgroundColor( 'cbc', 'yellow' )">Yellow</li>
<li style="background-color:beige;color:black;" onClick="changeBackgroundColor( 'cbc', 'beige' )">Beige</li>
</ul>
<div style="clear: both; padding: 30px;">
<p>特定の色をクリックすると、ここの背景色を変更する。</p>
</div>
</div>
<ul id="change-background-color">
<li style="background-color:black;color:white;" onClick="changeBackgroundColor( 'cbc', 'black' )">Black</li>
<li style="background-color:purple;color:white;" onClick="changeBackgroundColor( 'cbc', 'purple' )">Purple</li>
<li style="background-color:red;color:white;" onClick="changeBackgroundColor( 'cbc', 'red' )">Red</li>
<li style="background-color:blue;color:white;" onClick="changeBackgroundColor( 'cbc', 'blue' )">Blue</li>
<li style="background-color:green;color:white;" onClick="changeBackgroundColor( 'cbc', 'green' )">Green</li>
<li style="background-color:orange;color:black;" onClick="changeBackgroundColor( 'cbc', 'orange' )">Orange</li>
<li style="background-color:pink;color:black;" onClick="changeBackgroundColor( 'cbc', 'pink' )">Pink</li>
<li style="background-color:lime;color:black;" onClick="changeBackgroundColor( 'cbc', 'lime' )">Lime</li>
<li style="background-color:aqua;color:black;" onClick="changeBackgroundColor( 'cbc', 'aqua' )">Aqua</li>
<li style="background-color:yellow;color:black;" onClick="changeBackgroundColor( 'cbc', 'yellow' )">Yellow</li>
<li style="background-color:beige;color:black;" onClick="changeBackgroundColor( 'cbc', 'beige' )">Beige</li>
</ul>
<div style="clear: both; padding: 30px;">
<p>特定の色をクリックすると、ここの背景色を変更する。</p>
</div>
</div>
解説
JavaScript
<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){ // 引数を変数idと変数colorに代入
document . getElementById( id ) . style . backgroundColor = color; // id属性の値が、変数idの値である要素の背景色を変更
}
// -->
</script>
<!--
function changeBackgroundColor( id, color ){ // 引数を変数idと変数colorに代入
document . getElementById( id ) . style . backgroundColor = color; // id属性の値が、変数idの値である要素の背景色を変更
}
// -->
</script>
CSS
<style type="text/css">
<!--
ul#change-background-color { /* IDが、change-background-color の ul 要素 */
list-style-type: none; /* リストマーカーなし */
}
ul#change-background-color li { /* IDが、change-background-color の ul 要素内の li 要素 */
float: left; /* 右に回り込ませて、横並び */
margin: 0px; /* 外側の余白なし */
padding: 0px; /* 内側の余白なし */
width: 50px; /* 横幅:50px */
text-align: center; /* テキストの位置:センター */
font-size: 10px; /* 文字サイズ:10px */
cursor: pointer; /* マウスのカーソルの形:ポインタ */
}
-->
</style>
<!--
ul#change-background-color { /* IDが、change-background-color の ul 要素 */
list-style-type: none; /* リストマーカーなし */
}
ul#change-background-color li { /* IDが、change-background-color の ul 要素内の li 要素 */
float: left; /* 右に回り込ませて、横並び */
margin: 0px; /* 外側の余白なし */
padding: 0px; /* 内側の余白なし */
width: 50px; /* 横幅:50px */
text-align: center; /* テキストの位置:センター */
font-size: 10px; /* 文字サイズ:10px */
cursor: pointer; /* マウスのカーソルの形:ポインタ */
}
-->
</style>
HTML
<div id="cbc" style="background-color:元の色を指定;height:150px;"><!--この要素の背景色を変更する-->
<ul id="change-background-color"><!--色の順不同リスト-->
<li style="background-color:変更後の背景色を指定;color:このli要素内の文字色を指定;" onClick="changeBackgroundColor( 'cbc', '変更後の背景色を指定' )">変更後の色の名前</li>
・
・
・
</ul>
<div style="clear: both; padding: 30px;">
<p>特定の色をクリックすると、ここの背景色を変更する。</p>
</div>
</div>
<ul id="change-background-color"><!--色の順不同リスト-->
<li style="background-color:変更後の背景色を指定;color:このli要素内の文字色を指定;" onClick="changeBackgroundColor( 'cbc', '変更後の背景色を指定' )">変更後の色の名前</li>
・
・
・
</ul>
<div style="clear: both; padding: 30px;">
<p>特定の色をクリックすると、ここの背景色を変更する。</p>
</div>
</div>
元の背景色、変更後の背景色ともに、「 red 」のようなカラーネームでも、「 #ff0000 」のようなカラーコードでも、どちらでも指定可能。
onClick="changeBackgroundColor()"
イベント属性の onClick で、JavaScript の changeBackgroundColor() を呼び出している。
changeBackgroundColor()
changeBackgroundColor()の引数は、（ 背景色を変える要素のID, 背景色 ）となっている。