【javascript】动态改变样式

最新推荐文章于 2019-07-11 21:49:05 发布

Jeep_Dom

最新推荐文章于 2019-07-11 21:49:05 发布

阅读量968

点赞数

分类专栏： Javascript 文章标签： javascript 动态改变样式

本文链接：https://blog.csdn.net/jeep_ouc/article/details/17000739

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

动态改变样式

数据封装 -> 确定事件源 -> 注册事件 -> 事件处理

<script type="text/javascript">
	function changeStyle(className){
		var divID = document.getElementById("newsId");
		divID.className = className;
	}
</script>

<style type="text/css">  /*样式选择器*/
	.big{
		background-color: red;
		width:400px;
	}
	.normal{
		background-color: yellow;
		width:400px;
	}
	.small{
		background-color: blue;
		width:400px;
	}
</style>
</head>
<body>
 	<h2>hello,world...</h2>
 	<a href = "javascript:void(0)" οnclick="changeStyle('big')">大</a>   <%-- javascript：void(0)取消链接效果，事件源 --%>	
	<a href = "javascript:void(0)" οnclick="changeStyle('normal')">中</a>
	<a href = "javascript:void(0)" οnclick="changeStyle('small')">小</a><br/>
	<div id="newsId">
		you  can do it ...........
	</div>
</body>