IDEA激活码
新闻字体示例
新闻字体的大中小样式的改变：
1.现有新闻数据，并用标签封装
2.定义一些页面样式
3.确定事件源和事件，以及处理方式中被处理的节点
事件源：a
事件：onclick
既然要给超链接加入自定义的事件处理，就要取消超链接的默认点击效果:href=“javascript:void(0)”
4.用js处理页面的行为
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
/*设置样式*/
<style type="text/css">
/*超链接访问前和访问后样式一致*/
a:link,a:visited{
color: burlywood;
/*超链接的文本样式设置为无，去除下划线*/
text-decoration: none;
}
/*光标点上去变色*/
a:hover{
color: mediumvioletred;
}
#newstext{
/*设置对象的边框宽度*/
width: 500px;
/*设置对象的边框高度*/
/*height: 200px;*/
/*设置边框颜色，宽度，类型*/
border: greenyellow 1px solid;
/*设置上下左右内间距*/
padding: 10px;
/*设置上下左右外间距*/
/*margin: 5px;*/
}
</style>
<script type="text/javascript">
//定义改变字体的方法
function changeFont(size,clr) {
//既然要对div newstext中的文本进行操作，必须先获取div节点对象
var div1=document.getElementById("newstext");
//获取div1的style样式属性对象
div1.style.fontSize=size;
div1.style.color=clr;
}
</script>
</head>
<body>
<h1>这是一个新闻标题</h1>
<hr>
<a href="javascript:void(0)" onclick="changeFont('28px','#aaaaaa');">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('16px','#ffff00');">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('12px','#ff0000');">小字体</a>
<div id="newstext">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>
</body>
</html>
如果用户点击所需要的效果不唯一，通过传递多个参数虽然可以实现效果
问题：
传参是多阅读性差，js代码和css代码耦合性高，不利于扩展
解决方法：
将多个所需的样式进行封装,封装到选择器中，只要给指定的标签加载不同的选择器就可以了。
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*超链接访问前和访问后样式一致*/
a:link,a:visited{
color: burlywood;
/*超链接的文本样式设置为无，去除下划线*/
text-decoration: none;
}
/*光标点上去变色*/
a:hover{
color: mediumvioletred;
}
/*id选择器*/
#newstext{
/*设置对象的边框宽度*/
width: 500px;
/*设置对象的边框高度*/
/*height: 200px;*/
/*设置边框颜色，宽度，类型*/
border: greenyellow 1px solid;
/*设置上下左右内间距*/
padding: 10px;
/*设置上下左右外间距*/
/*margin: 5px;*/
}
/*
预定义一些样式封装到选择器，一般使用类选择器
id选择器的优先级高于类选择器
*/
.norm{
color: hotpink;
font-size: 16px;
background-color: pink;
}
.max{
color: cornflowerblue;
font-size: 28px;
background-color: lightcoral;
}
.min{
color: lightblue;
font-size: 28px;
background-color: burlywood;
}
</style>
<script type="text/javascript">
//定义改变字体的方法
function changeFont(selectName) {
//既然要对div newstext中的文本进行操作，必须先获取div节点对象
var div1=document.getElementById("newstext");
//获取div1的className属性对象
div1.className=selectName;
}
</script>
</head>
<body>
<h1>这是一个新闻标题</h1>
<hr>
<a href="javascript:void(0)" onclick="changeFont('max');">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('norm');">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('min');">小字体</a>
<div id="newstext">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>
</body>
</html>
