您的位置：首页 > Web前端 > JavaScript

【javascript】动态改变样式

2013-11-28 09:25 459 查看
动态改变样式

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

<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)" onclick="changeStyle('big')">大</a>   <%-- javascript：void(0)取消链接效果，事件源 --%>
<a href = "javascript:void(0)" onclick="changeStyle('normal')">中</a>
<a href = "javascript:void(0)" onclick="changeStyle('small')">小</a><br/>
<div id="newsId">
you  can do it ...........
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 动态改变样式
相关文章推荐
新的分享
章节导航