<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo11</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="司倡如597189138@qq.com">
<link rel="stylesheet" href="./reset.css">
<style>
*{margin: 0px;padding: 0px;}
.all{width: 800px;height: 500px;background:#eee;}
#b{width: 100px;}
#box{font-size: 12px;color: #000;}
</style>

</head>

<body>
<div class="all" id="all">

背景颜色：<select name="" id="b" onchange = "change('b','all','backgroundColor')">
<option value="#eee" select="selected">默认</option>
<option value="red">红</option>
<option value="yellow">黄</option>
<option value="blue">蓝</option>
</select>
字体大小：<select name="" id="f" onchange = "change('f','box','fontSize')">
<option value="12px">默认</option>
<option value="14px">14px</option>
<option value="48px">48px</option>
<option value="72px">72px</option>
<option value="84px">84px</option>
</select>
字体颜色：<select name="" id="c" onchange = "change('c','box','color')">
<option value="#000">默认</option>
<option value="red">红</option>
<option value="yellow">黄</option>
<option value="blue">蓝</option>
</select>
<div class="box" id="box">1234567890甲乙丙丁一二三四五六七八九十</div>
</div>
<button type="button" onclick="alert('觉得有用吗？')">点击这里</button>

</body>
<script language="javaScript">

/*function b(){
var b = document.getElementById("b");
var value = b.options[b.selectedIndex].value; // 选中值
box.style.backgroundColor = value;
}

function f(){
var f = document.getElementById("f");
var value = f.options[f.selectedIndex].value; // 选中值
document.getElementById("box").style.fontSize = value;
}
function c(){
var c = document.getElementById("c");
var value = c.options[c.selectedIndex].value; // 选中值
document.getElementById("box").style.color = value;
}*/

function change(idname,changewhereid,changewhat){
var idname = document.getElementById(idname);
var value = idname.options[idname.selectedIndex].value; // 选中值
// alert(value);
// alert(changewhereid);
// alert(changewhat);
document.getElementById(changewhereid).style[changewhat] = value;
}

</script>
</html>