您的位置：首页 > 产品设计 > UI/UE
通过css(name,value)方法动态的改变字体大小

2010-02-26 09:24 701 查看
<mce: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的功能

});
});
// --></mce: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>

</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>
<!--
StringJavascript 字符串css( String name )访问第一个匹配元素的样式属性。英文详解
访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。
[示例]:
取得第一个段落的color样式属性的值。

$("p").css("color");
HTML标记:
<p style="color:red;" mce_style="color:red;">Test Paragraph.</p>
结果:
"red"
[示例]:
取得第一个段落的font-weight样式属性的值。

$("p").css("font-weight");
HTML标记:
<p style="font-weight: bold;" mce_style="font-weight: bold;">Test Paragraph.</p>
结果:
"bold"

jQueryjQuery 对象css( Map属性和值以 "property/value" 对形式表示的 Javascript 对象 properties要设置为样式属性的名/值对对象 )把一个“名/值对”对象设置为所有匹配元素的样式属性。英文详解
把一个“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
[示例]:
为所有p元素设置color和background样式属性。

$("p").css({ color: "red", background: "blue" });
HTML标记:
<p>Test Paragraph.</p>
结果:
<p style="color:red; background:blue;" mce_style="color:red; background:blue;">Test Paragraph.</p>

jQueryjQuery 对象css( StringJavascript 字符串 key要设置的样式属性名称, ObjectJavascript 对象。例如：String 或 Number 的实例 value )在所有匹配的元素中，设置一个样式属性的值

-->
</body>
说明：此段代码主要通过css(name,value)来处理动态改变字体的大小。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航