jquery之css()改变字体大小,颜色,背景色
转:
<script type="text/javascript">
$(document).ready(function() {
$("#fontsize").change(function(){
var size = $("#fontsize").val();//获取下拉框的值
$("p").css({"font-size":size }); //把值付给css的font-size
});
$("#backgroundcolor").change(function(){
var backgroundcolor = $("#backgroundcolor").val();
$("p").css({"background":backgroundcolor});
});
$("#fontcolor").change(function(){
var fontcolor = $("#fontcolor").val();
$("p").css({"color":fontcolor});
});
});
</script>
<label for="fontsize">字体大小</label>
<select id="fontsize">
<option value="12px">小号</option>
<option value="14px">较小</option>
<option value="16px" >中号</option>
<option value="18px">较大</option>
<option value="24px">大号</option>
</select>
<label for="backgroundbackground">背景颜色</label>
<select id="backgroundcolor">
<option value="#F4FBFF">默认</option>
<option value="gray">淡灰</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="yellow">明黄</option>
</select>
<label for="fontcolor">字体颜色</label>
<select id="fontcolor">
<option value="#000000">黑色</option>
<option value="#ff0000">红色</option>
<option value="#006600">绿色</option>
<option value="#0000ff">蓝色</option>
<option value="#660000">棕色</option>
</select>