【javascript】动态改变样式

来源:互联网 发布:淘宝手表带价格及图片 编辑:程序博客网 时间:2024/06/05 04:02

动态改变样式

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

<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>