<!DOCTYPE html >
<html >
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fontsize").change(
function()
{
$("p").css({fontSize:this.value});//dom
}
)
// change the font color
$("#backgroundcolor").change(
function()
{
$("p").css({background:this.value});
}
)
// change the background color
$("#fontcolor").change(
function()
{
$("p").css({color:this.value});
}
)
});
</script>
</head>
<body>
<div id="formstylecontrols">
<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>
<label>
<input type="submit" id="style" value="保存設置" />
</label>
</div>
<p>三月初三，春日晴朗</p>
<p>浩浩盪盪的迎親隊伍，轉過金陵城的主要街道，再把出盡風頭的新皇后馮妙芝送到皇帝選定的洞房柔光殿。賀喜的大臣、親友已經紛紛告退了，很快，帝后就要攜手進入洞房，共度春宵了……</p>
<p>此時此刻，我站在這片涇水和渭水之間的大牧場上，腳下是三塊古舊的巨大的石板鋪就的小小廣場，前面的松柏蔥翠里是一座冷冷的尼庵，那就是曾經寵愛過我的君王給我的最后的歸宿。</p>
</body>
</script>
</html>
jquery-css練習；改變p標簽中字體的大小 顏色 背景
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。