需求：新闻字体的大中小样式改变。
平时上网看新闻，网页中经常会有按钮来调节字体大小。
思路：
1.先有新闻数据，并用标签封装；
2.定义一些页面样式；
3.确定事件源和事件，以及处理方式中被处理的节点；
（如超链接“大字体”是事件源，单击该超链接是事件，被处理的节点是div区域，即新闻字体发生改变）
事件源：a标签
事件：onclick
被处理的节点：div-newstext
【重点】超链接默认具备onclick事件，即任何一个超链接在产生后都会具备点击效果，那么我们不需要该
点击效果，怎么办？
→既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果。
可以使用href设置，即在超链接href中加入javascript:void(0)的方式来完成。
【记住】凡是取消超链接点击效果，全用这个
==============================================================================================================
【示例】
<html>
<head>
<style type="text/css">
/*超链接访问前，访问后样式一致*/
a:link,a:visited{
color:#04F;
text-decoration:none;//去除超链接下划线
}
/*鼠标停在超链接上，超链接样式改变*/
a:hover{
color:#F80;
}
/*修改新闻正文样式*/
#newstext{
width:500px;
border:#0F0 1px solid;//加边框
padding:10px;//内边距
}
</style>
</head>
<body>
<script type="text/javascript">
//定义改变字体的方法。
function changFont(size){
/*
*既然要对div newstext中的文本字体进行操作，
*必须要先获取div节点对象
*/
var oNewsText = document.getElementById("newstext");
/*
*获取oNewsText节点的style样式属性对象
*打开DHTML API文档，找到div对象，点击样式，这个样式就是其style属性，
*发现有三列内容，第一列“样式标签属性”全都是CSS代码，第二列“样式属性”
*全都是DOM对象能调用的属性，即DOM代码，第三列“描述”是说明文字。
*（如字号属性，第一列CSS代码名称是font-size，即我们日常写CSS代码中用
*该名称设置字号；第二列DOM代码名称是fontSize，是我们获取到节点对象后
*用该名称去设置字号属性）
*/
oNewsText.style.fontSize = size;
//oNewsText为div节点对象，然后.style是拿到其样式，然后.fontSize是拿到其样式中的字号属性
}
</script>
<h1>这是一个新闻标题</h1>//该标签用于封装标题
<hr/>
<a href="javascript:void(0)" οnclick="changFont('28px')">大字体</a>
<a href="javascript:void(0)" οnclick="changFont('16px')">中字体</a>
<a href="javascript:void(0)" οnclick="changFont('12px')">小字体</a>
<div id="newstext">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>
</body>
</html>
616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
