|
#2
R的补2019-04-01 18:52
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div{
border:solid 1px #0033FF;
width:550px;
padding:20px;
}
#text{
margin-top:20px;
}
#cfdiv{
text-align: right;
/*调整宽度*/
width: 400px;
}
#cfdiv a:link,a:visited {
color:#0033FF;
text-decoration:none;
}
#cfdiv a:hover{
color:#FF6633;
}
</style>
<script type="text/javascript" src="jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.#G").click(function(){
var divNode = document.getElementById("text");
divNode.style.fontSize=Font_Size[0].GREAT+"px";
}
$("a.#M").click(function(){
var divNode = document.getElementById("text");
divNode.style.fontSize=Font_Size[1].MEDIUM+"px";
}
$("a.#S").click(function(){
var divNode = document.getElementById("text");
divNode.style.fontSize=Font_Size[2].SMALL+"px";
}
var Font_Size= [
{GREAT:18},
{MEDIUM:16},
{SMALL:12}
];
}
</script>
</head>
<body>
<div id="div">
<div id=“title”>
<h1>Web程序设计</h1><hr/>
</div>
<div id="cfdiv">
<a href="javascript:void(0)" id="G">大字体</a>
<a href="javascript:void(0)" id="M">中字体</a>
<a href="javascript:void(0)" id="S">小字体</a>
</div>
<div id="text">
HTML CSS DOM JAVASCRIPT JQUERY<br />
</div>
</div>
</body>
</html>
<script type="text/javascript">