首页 > 代码库 > 示例-新闻字体

示例-新闻字体

2024-07-07 18:08:59   223人阅读

<title>新闻字体的大中小样式</title>
<style type="text/css">
/*超链接访问签，访问后样式一致*/
a:link,a:visited{
color:#0044ff;
text-decoration:none;
}
a:hover{
color:#ffcc00;
}
#newstext{
width:500px;
border:#00ff00 1px solid;
padding::10px;
}
/*预定义一些样式封装到选择器。一般使用类选择器。*/
.norm{
color:#960;
font-size:16px;
background-color:#3F0;
}
.max{
color:#808080;
font-size:28px;
background-color:#F39;
}
.min{
color:#63F;
font-size:8px;
background-color:#CCC;
}
</style>
</head>

<body>
<script type="text/javascript">
//定义改变字体的方法
function changeFont(size,clr){
/*
*既然要对div newstext中的文本字体进行操作。
*必须要先获取div节点对象。
*
*/
var oNewsText = document.getElementById("newstext");
//获取oNewsTest节点的style
oNewsText.style.fontSize=size;
oNewsText.style.color=clr;
}

/*
*如果根据用户点击所需要的效果不唯一。
*仅通过多个参数虽然可以实现效果，但是
* 1、传参过多，阅读性差；
* 2、js代码和css代码耦合性高；
* 3、不利于扩展；
*
*解决：
*将多个所需的样式进行封装。
*封装到选择器中，只要给指定的标签加载不同的而选择器就可以了。
*/
function changeFont(name){
var oNewsText = document.getElementById("newstext");
oNewsText.className = name;
}

</script>
<!--
需求：新闻字体的大中小样式改变
思路：
1、先有新闻数据，并用标签封装。
2、定义一些页面样式。
3、确定事件源和事件，以及处理方式中被处理的节点。
事件源：a标签，事件：onclick。
被处理的节点：div-newstext。

既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果。
可以使用给href设置：javascript:void(0)来完成。

-->

<h1>詹姆斯35+10 热火98-96胜马刺1-1</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">
热火队詹姆斯35分10篮板，波什[微博]18分并在最后时刻命中关键三分，韦德[微博]14分7篮板，刘易斯14分；马刺队帕克21分7助攻，邓肯18分15篮板(157次季后赛两双追平魔术师)，吉诺比利19分。
</div>



</body>


联系
我们