DOM（二）-02-(示例-新闻字体2)

最新推荐文章于 2023-11-01 09:17:09 发布

wy_0928

最新推荐文章于 2023-11-01 09:17:09 发布

阅读量274

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810383

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 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样式>id选择器>类选择器
		 *在将一些预定义样式封装到各个选择器中时，可能出现在后续代码启用这些样式但是没出现应有效果的问题，这是因为
		 *优先级的问题，比如一个超链接原先样式用的是id选择器，现在新样式用类选择器，那么肯定无法呈现出新样式的效果，
		 *因为类选择器优先级不如id选择器。
		 */
		 
		.norm{/*预定义默认样式*/
			color:#000;
			font-size:16px;
			background-color:#cdd8d0;
		}
		.max{/*预定义“大字体”样式*/
			color:#808080;
			font-size:28px;
			background-color:#9ce9b4;
		}
		.min{/*预定义“小字体”样式*/
			color:#f00;
			font-size:12px;
			background-color:#f1b96d;
		}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			
			function changFont(selectorName){
				
				var oNewsTextNode = document.getElementById("newstext");
				
				/*
				 *打开DHTML API文档，找到div对象，其属性一栏有三列内容：
				 *（1）第一列“标签属性”是HTML代码；
				 *（2）第二列“属性”是DOM代码；
				 *（3）第三列“描述”是解释说明。
				 *（如本程序用到的类选择器属性，在HTML代码中名称是CLASS，在DOM代码
				 *中名称是className）
				 */
				 
				oNewsTextNode.className = selectorName;
				
			}
			
			/*
			 *如果根据用户点击所需要的效果不唯一，仅通过传递多个参数虽然可以实现
			 *效果，但是有以下几个弊端：
			 *1.传参过多，阅读性差；
			 *2.js代码和css代码耦合性高；
			 *3.不利于扩展。
			 *（比如你想在单击“大字体”超链接时候出现10个效果，那么没必要在：
		     *<a href="javascript:void(0)" οnclick="changFont('28px','#AAA')">大字体</a>
			 *代码中传入10个参数，麻烦，所以可以将这些效果封装起来。）
			 *
			 *【解决方案】
			 *将多个所需的样式进行封装，封装到选择器中，只要给指定的标签加载不同的选择器即可。
			 *（就好像你去出席一个重要场合，需要大衣领带皮鞋等，那么直接将这些封装成“晚会服饰”，
			 *然后下次再出席，直接获取“晚会服饰”即可）
			 */
		
		</script>
	</body>
	<h1>这是一个新闻标题</h1>
	
	<hr/>
	
	<a href="javascript:void(0)" οnclick="changFont('max')">大字体</a>
	<a href="javascript:void(0)" οnclick="changFont('norm')">中字体</a>
	<a href="javascript:void(0)" οnclick="changFont('min')">小字体</a>
	
	<div id="newstext" class="norm">
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
	</div>
<html>

后期修改样式只要该三个类选择器：.norm .max .min即可，别的不用动，很方便

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（二）-02-(示例-新闻字体2)

在前一视频基础上，希望单击超链接后不光改变字号，还可以改变字体颜色，甚至改变背景=============================================================================================================【示例】 a:link,a:visi
复制链接

扫一扫