DOM09---新闻字体的改变01

最新推荐文章于 2025-08-02 18:18:22 发布

onyas

最新推荐文章于 2025-08-02 18:18:22 发布

阅读量796

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM 文章标签： DOM 新闻字体的改变

本文链接：https://blog.youkuaiyun.com/zheng0518/article/details/8997614

DOM 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在网页上通过点击按钮动态改变文本的字体大小和颜色，包括大字体、中字体和小字体的样式设定及交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过点击大字体，中字体，小字体动态的改变字体的大小跟颜色

<html>
	<head>
		<title></title>
		<style type="text/css">
			a:link,a:visited{
				color:#0000ff;
				text-decoration:none;
			}
			a:hover{
				color:ff8800;
			}
			#newsText{
				width:500px;
				border:#00ff00 1px solid;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<!--
			新闻字体的大中小样式
			思路：
				1、先有新闻数据，并用标签封装
				2、定义一些页面样式
				3、确定事件源和事件，以及处理方式中被处理的节点
					事件源：a标签
					事件	onclick()
					被处理的节点：newsText
					如果要给超连接加入事件处理，就要先取消链接的默认点击效果
						可以给href设置javascript:void(0)的方式
		-->
		<script type="text/javascript">
			function changeFont(size,clr)
			{
				var onewsText = document.getElementById("newsText");
				//获取onewsText节点的style样式属性对象
				onewsText.style.fontSize = size;
				onewsText.style.color = clr;
			}
		</script>
		<h1>这是一个新闻标题</h1>
		<hr/>
		<a href="javascript:void(0)" onclick="changeFont('28px','#aaaaaa')">大字体</a>
		<a href="javascript:void(0)" onclick="changeFont('16px','#000000')">中字体</a>
		<a href="javascript:void(0)" onclick="changeFont('10px','#ff0000')">小字体</a>
		 <div id="newsText">
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
		</div>
	</body>
</html>