示例-新闻字体

<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>


<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>

时间： 2024-11-13 07:51:47

示例-新闻字体

示例-新闻字体的相关文章

关于Web(通过点击切换新闻字体)

01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

CSS3字体模块

DOM&JavaScript示例&练习

python爬虫：使用urllib.request和BeautifulSoup抓取新浪新闻标题、链接和主要内容

DOM学习笔记三

SDL系列之 - 编译参数

HTML标签解释大全

html简单总结