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

最新推荐文章于 2022-02-22 15:51:05 发布

xing-xing

最新推荐文章于 2022-02-22 15:51:05 发布

阅读量518

点赞数

文章标签： javascript xhtml div css html 文档

本文链接：https://blog.csdn.net/a1638221216/article/details/6519813

版权

经常浏览网站的朋友想必知道，当一个网页的内容过多，页面比较长时，浏览起来不是很方便。网页的字体大小也影响用户的阅读，所以在网站开发过程中，为了提高网页的可读性和用户的友好性，网站开发者们经常在网页的某个位置提供用户选择字体的地方，用户可以通过点击不同的字号，改变当前网页的字体大小，下面我们就来看看如何实现通过点击“大”、“中”、“小”三个文字改变网页的眼色，想实现这种效果并不难，可以用几种方法实现，通常最方便的一种就是使用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);" οnclick="changeFont('large')">大</a>
<a href="javascript:void(0);" οnclick="changeFont('middle')">中</a>
<a href="javascript:void(0);" οnclick="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>