使用JavaScrpt实现网页字体的自由选择

          经常浏览网站的朋友想必知道,当一个网页的内容过多,页面比较长时,浏览起来不是很方便。网页的字体大小也影响用户的阅读,所以在网站开发过程中,为了提高网页的可读性和用户的友好性,网站开发者们经常在网页的某个位置提供用户选择字体的地方,用户可以通过点击不同的字号,改变当前网页的字体大小,下面我们就来看看如何实现通过点击“大”、“中”、“小”三个文字改变网页的眼色,想实现这种效果并不难,可以用几种方法实现,通常最方便的一种就是使用JavaScript中Dom的方法实现通过给节点动态的设置样式完成想要的效果,

实现的思路:
1)设置想要设置后的字体样式
2)使用JavaScript获得将要被操作的节点对象
3)通过设置JS DOM的className的值改变被操作对象的样式即可

代码如下:

           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.large{
font-size:28px;
color:#0099FF;
background-color:#FFCC66;
cursor:pointer;}

.middle{
font-size:20px;
color:#999999;}

.small{

font-size:14px;
color:#FFCC00;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function changeFont(css1){
var div=document.getElementById("div1");
div.className=css1;

}

</script>
</head>

<body>
<a href="javascript:void(0);" onclick="changeFont('large')">大</a>
<a href="javascript:void(0);" onclick="changeFont('middle')">中</a>
<a href="javascript:void(0);" onclick="changeFont('small')">小</a>
<hr />
<div id="div1">
asdfsadfasdfasdfasdfasdfasdfsadfsadf<br>
速度萨方法送达飞洒飞洒阿萨速度放阿萨速度放<br>
asdfsadfasdfasdfasdfasdfasdfsadfsadf<br>
速度萨方法送达飞洒飞洒阿萨速度放阿萨速度放<br>
asdfsadfasdfasdfasdfasdfasdfsadfsadf<br>
速度萨方法送达飞洒飞洒阿萨速度放阿萨速度放<br>
asdfsadfasdfasdfasdfasdfasdfsadfsadf<br>
速度萨方法送达飞洒飞洒阿萨速度放阿萨速度放<br>
asdfsadfasdfasdfasdfasdfasdfsadfsadf<br>
速度萨方法送达飞洒飞洒阿萨速度放阿萨速度放<br>
</div>
</body>
</html>

你可能感兴趣的:(JavaScript,html,XHTML,css,文档,div)