この記事では、色ブロックをクリックして指定された領域の背景色を切り替えるJSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<title> jsは、カラーブロックをクリックして、指定された領域の背景色を切り替えることを実現します</title>
</head>
<body>
<div align = "center">
<表BGCOLOR =＃F8F8F8 CELLPADDING = "0" style = "border-collapse：collapse" id = "bb1">
<tr>
<td colspan = "2">
<div align = "center">
<table cellpadding = "0" style = "border-collapse：collapse" id = "table2">
<tr> <td style = "line-height：150％"> <span style = "font-size：14px">時間内にWebページの指定された領域の背景色を切り替えます</span> </td>
</tr> </table>
</div>
</td>
</tr> </table> </div>
<div align = "center">
<Table CellPadding = "0" style = "border-collapse：collapse" id = "table1">
<tr> <td> <p align = "right"> <font color = "＃808080"> <span style = "font-size：9pt">背景を選択してください：</span> </font> </td>
<td> <div align = "center"> <table cellpacing = "0" cellpadding = "0" id = "table1" style = "border-collapse：collapse" bordercolor = "＃fffff">
<tr>
<td onclick = "bb1.style.backgroundcolor = 'fdfdf0'; set_color（ 'fdfdf0'）" bgcolor = "＃fdfdf0"> </td>
<td onclick = "bb1.style.backgroundcolor = 'b1d5f3'; set_color（ 'b1d5f3'）" bgcolor = "＃b1d5f3"> </td>
<td onclick = "bb1.style.backgroundcolor = 'b4e7d9'; set_color（ 'b4e7d9'）" bgcolor = "＃b4e7d9"> </td>
<td onclick = "bb1.style.backgroundcolor = 'f1e8ff'; set_color（ 'f1e8ff'）" bgcolor = "＃f1e8ff"> </td>
<td onclick = "bb1.style.backgroundcolor = 'e8fff3'; set_color（ 'e8fff3'）" bgcolor = "＃e8fff3"> </td>
<td onclick = "bb1.style.backgroundcolor = 'cdcdde'; set_color（ 'cdcdde'）" bgcolor = "＃cdcdde"> </td>
</tr>
</table>
</div> </td> </tr> </table>
</div>
<スクリプト言語= javascript>
function get_cookie（name_to_get）{
var cookie_pair
var cookie_name
var cookie_value
var cookie_array = document.cookie.split（ ";"）
for（counter = 0; counter <cookie_array.length; counter ++）{
cookie_pair = cookie_array [counter] .split（ "="）
cookie_name = cookie_pair [0]
cookie_value = cookie_pair [1]
if（cookie_name == name_to_get）{
unescape（cookie_value）を返す
}
}
nullを返します
}
var bg_color = get_cookie（ "bgcolor_cookie"）
function set_color（color_val）{
set_cookie（ "bgcolor_cookie"、color_val、365、 "/"）
}
function set_cookie（cookie_name、cookie_value、cookie_expire、cookie_path、cookie_domain、cookie_secure）{
var cookie_string = cookie_name + "=" + cookie_value
if（cookie_expire）{
var expire_date = new date（）
var ms_from_now = cookie_expire * 24 * 60 * 60 * 1000
expire_date.settime（expire_date.gettime（） + ms_from_now）
var expire_string = expire_date.togmtstring（）
cookie_string + = "; expires =" + expire_string
}
if（cookie_path）{
cookie_string + = "; path =" + cookie_path
}
if（cookie_domain）{
cookie_string + = "; domain =" + cookie_domain
}
if（cookie_secure）{
cookie_string += "; true"
}
document.cookie = cookie_string
}
if（bg_color）{
bb1.style.backgroundcolor = bg_color
}
</script>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。