<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1.0">
<title>表示設定変更</title>
<script>
var backgrounds = {
'白' : 'white','ラベンダー' : 'lavender','薄桜' : '#fdeff2','スカイブルー' : '#a0d8ef','アスパラガスグリーン' : '#dbebc4','ライムライト' : '#fff799'
};
var colors = {
'黒' : 'black','クリムソン' : 'crimson','ミッドナイトブルー' : 'midnightblue','ダークグリーン' : 'darkgreen','ダークオレンジ' : 'darkorange'
};
function color_change() {
var element = document.getElementsByTagName('body');
//フォームから背景色と文字色の値を受け取り、body要素に設定する。☆
element[0].style.background = '';
element[0].style.color = '';
}
</script>
<style>
</style>
</head>
<body>
<h1>表示設定変更</h1>
<form name="colorchange">
<div style="display:flex;flex-direction:row">
<fieldset>
<legend>背景色</legend>
<script>
document.write('<select name="background" size="'+ Object.keys(backgrounds).length +'" onclick="color_change()">');
for(var background in backgrounds){
document.write('<option value="'+ backgrounds[background] +'">' + background + '</option>');
}
document.write('</select>');
</script>
</fieldset>
<fieldset>
<legend>文字色</legend>
<script>
document.write('<select name="color" size="'+ Object.keys(colors).length +'">');
for(var color in colors){
document.write('<option value="'+ colors[color] +'">' + color + '</option>');
}
document.write('</select>');
</script>
</fieldset>
</div>
</form>
</body>
</html>