关键代码:
$("#formstylecontrols select").change(function(){
alert($(this).attr("id")+" "+$(this).val());
$("p").css($(this).attr("id"),$(this).val());
//这里用了一个技巧:把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能
});
程序代码
<script type="text/javascript">
$(document).ready(function() {
$("#formstylecontrols select").change(function(){
alert($(this).attr("id")+" "+$(this).val());
$("p").css($(this).attr("id"),$(this).val());
//这里用了一个技巧:把select的ID和要设置的CSS属性值一致 , 就可以一个语句实现三个select的功能
});
});
</script>
</head>
<body>
<div id="formstylecontrols">
<label for="font-size">字体大小</label>
<select id="font-size">
<option value="12px">小号</option>
<option value="14px">较小</option>
<option value="16px" >中号</option>
<option value="18px">较大</option>
<option value="24px">大号</option>
</select>
<label for="background">背景颜色</label>
<select id="background">
<option value="#F4FBFF">默认</option>
<option value="#f0f0f0">淡灰</option>
<option value="#eaeaea">灰色</option>
<option value="#eefaee">绿色</option>
<option value="#ffffed">明黄</option>
</select>
<label for="color">字体颜色</label>
<select id="color">
<option value="#000000">黑色</option>
<option value="#ff0000">红色</option>
<option value="#006600">绿色</option>
<option value="#0000ff">蓝色</option>
<option value="#660000">棕色</option>
</select>
<label>
<input type="submit" id="style" value="保存设置" />
</label>
</div>
<h2>第一章:冷宫的咒怨</h2>
<p>三月初三,春日晴朗</p>
<p>今天是皇帝的大婚典礼</p>
<p>金陵城万人空巷,百姓、官吏都出来观看皇帝的迎亲大典。这一天,按照当今皇帝的旨意,用了皇家规格最高的仪仗来迎娶乐亭侯家的女儿冯妙芝。凤辇前有全副武装的侍卫开道,威武庄严;后有彩衣宫女护拥,花团锦簇。车水马龙,熙熙攘攘,香艳欣羡了整整一条街。七十二对绛纱宫灯分外耀眼,乐队高奏迎亲鼓乐,丝竹之声震耳欲聋,把迎亲的气氛推向了高潮。</p>
<p>浩浩荡荡的迎亲队伍,转过金陵城的主要街道,再把出尽风头的新皇后冯妙芝送到皇帝选定的洞房柔光殿。贺喜的大臣、亲友已经纷纷告退了,很快,帝后就要携手进入洞房,共度春宵了……</p>
<p>此时此刻,我站在这片泾水和渭水之间的大牧场上,脚下是三块古旧的巨大的石板铺就的小小广场,前面的松柏葱翠里是一座冷冷的尼庵,那就是曾经宠爱过我的君王给我的最后的归宿。</p>
<p>心如刀绞,我24岁的生命忽然变得如此虚无,它曾如最潋滟的花,还没开到鼎盛,就悄然没落。</p>
<p>后宫是一座巨大的花园,每个季节都有每个季节的鲜妍,没有任何女人能够常开不败。如果我曾经属于“春”,现在就该轮回到其他人的“夏”了——我的花季,它悄然谢幕了。</p>
<p>18-24岁,一生中最年轻、最华美的岁月,我在大唐后宫充满胭脂水粉的暧昧气息里,在没有硝烟却满是惊险和刺激的嫔妃争斗里,曾经一度强势崛起,宠冠三千粉黛。</p>
<p>只是,那个时候,我没有想到春天其实是如此短暂。</p>
本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=407