首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

改变层背景色彩

2012-10-28 
改变层背景颜色label forfontsize字体大小/label 02.select idfontsize 03.option value12

改变层背景颜色
<label for="fontsize">字体大小</label>
02.       
<select id="fontsize">
03.       
<option value="12px">小号</option>
04.       
<option value="14px">较小</option>
05.       
<option value="16px" >中号</option>
06.       
<option value="18px">较大</option>
07.       
<option value="24px">大号</option>
08.</select>
09.<label for="backgroundbackground">背景颜色</label>
10.<select id="backgroundcolor">
11.       
<option value="#ffffff">默认</option>
12.       
<option value="gray">淡灰</option>
13.       
<option value="red">红色</option>
14.       
<option value="green">绿色</option>
15.<option value="yellow">明黄</option>
16.</select>
17.<label for="fontcolor">字体颜色</label>
18.<select id="fontcolor">
19.       
<option value="#000000">黑色</option>
20.       
<option value="#ff0000">红色</option>
21.       
<option value="#006600">绿色</option>
22.       
<option value="#0000ff">蓝色</option>
23.<option value="#660000">棕色</option>
24.</select>view sourceprint?01.<script type="text/javascript">
02. 
$(document).ready(function() {
03.     
$("#fontsize").change(function(){
04.         
var size = $("#fontsize").val();//获取下拉框的值
05.         
$("#endtext").css({"font-size":size }); //把值付给css的font-size
06.         
$("#endtext>*").css({"font-size":size }); //把值付给css的font-size
07.     
});
08.     
$("#backgroundcolor").change(function(){
09.         
var backgroundcolor = $("#backgroundcolor").val();
10.         
$("#endtext").css({"background":backgroundcolor});
11.     
});
12.     
$("#fontcolor").change(function(){
13.         
var fontcolor = $("#fontcolor").val();
14.         
$("#endtext").css({"color":fontcolor});
15.     
});
16. 
});
17.</script>

热点排行