网页改divclass属性和link属性

最新推荐文章于 2021-10-28 10:41:08 发布

孤独斗士

最新推荐文章于 2021-10-28 10:41:08 发布

阅读量976

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/gulanga5/article/details/107165306

版权

web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一.用dom操作实现p标签文字改大小, link标签改href属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>dom操作</title>
	<link rel="stylesheet" type="text/css" href="css/none.css" id="link"/>
	<style type="text/css">
		body{font-size:18px;font-family:"微软雅黑";}
		hr{border: 1px solid #ADADAD;}
		a{font-size: 17px;font-weight: 500;}
		a:hover{color:#B03060;}
		h2,#change-font{text-align: center;}
		#newstext{padding:10px;margin:0 auto; letter-spacing: 2px;}
		/* 预先用选择器给定一些样式 */
		.min{font-size: 16px;}
		.middle{font-size: 18px;}
		.max{font-size: 20px;}
		.super-max{font-size: 24px;}
	</style>
	<script type="text/javascript">
		/** 练习1：执行下面的函数，切换字体大小 */
		function resize(size){
			var Div=document.getElementById("newstext");
			Div.className=size;
		}
		//定义数组，存放不同的皮肤（css文件的路径）
		var styleArr=["css/red.css","css/green.css","css/blue.css"];
		var i=0;
		function changeColor(){
			//获取link标签
			var Link=document.getElementById("link");
			Link.href=styleArr[i];
			i++;
			if(i>=styleArr.length){
				i=0;
			}
		}
	</script>
</head>
<body>
	<h2>达内时代科技集团简介</h2>
	<div id="change-font">
		<a href="javascript:void(0)" onclick="resize('min')">小字体</a>
		<a href="javascript:void(0)" onclick="resize('middle')">中字体</a>
		<a href="javascript:void(0)" onclick="resize('max')">大字体</a>
		<a href="javascript:void(0)" onclick="resize('super-max')">超大字体</a>
		<a href="javascript:void(0)" onclick="changeColor()">换肤</a>
	</div>
	<hr />
	<div id="newstext" class="middle">
		<p>猛虎科技集团有限公司，是中国高端IT培训的领先品牌，致力于培养面向互联网、电信和金融领域的Java、C++、C#、.Net、软件测试、嵌入式、PHP、android等方面的中高端软件人才。</p>
		<p>猛虎科技创办于2002年，专注IT职业教育17年，2014年在美国纳斯达克上市公司。目前，已开设24大课程方向，在全国70多个城市建立了330家培训中心，真正实现“一地学习，全国就业”。高薪聘请总
		监级名师全职授课，术业有专攻，名师出高徒。实施“因材施教，分级培优”教学方案，让每一位学员都成才，让强者更强。采用“先学习，就业后付款”的模式，已帮助80万名学员成功就业。</p>
		<p>猛虎科技优秀的教学效果和行业领先的经营模式赢得了社会各界的广泛赞誉和好评，荣获了各界权威机构的颁奖：猛虎科技成为业界唯一的一家2006、2007、2008、2009连续4年入选德勤评选的 
		“中国高科技高成长50强公司”、“亚太地区高科技高成长500强公司”，获得首届中国留学人才归国创业“腾飞”奖、中关村管理委员会指定的“软件人才培养示范基地”、被《计算机世界》评选的
		“就业服务杰出贡献奖”、被《中国计算机报》评选的“最具影响力培训机构奖”、被搜狐评为“中国十大教育集团”、被腾讯评为“中国大学生心目中最具影响力的IT品牌”。有实力、有信誉，要培训，就选上市公司！</p>
	</div>
	<hr />
</body>
</html>

二.css:
A…blue.css

@charset "UTF-8";
body{
	background:#baecde;
}
#newstext{
	background:yellow;
	color:blue;
}

B.green.css

@charset "UTF-8";
body{
	background:#ffaff5;
}
#newstext{
	background:#eee5e1;
	color:green;
}

C.red.css

@charset "UTF-8";
body{
	background:pink;
}
#newstext{
	background:#fff;
	color:red;
}

三.效果图:
在这里插入图片描述

孤独斗士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页改divclass属性和link属性

一.用dom操作实现p标签文字改大小, link标签改href属性<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>dom操作</title> <link rel="stylesheet" type="text/css" href="css/none.css" id="link"/> <style type="text/css">
复制链接

扫一扫