首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

js改变style式样和css样式

2012-10-14 
js改变style样式和css样式js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也

js改变style样式和css样式

        js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>Change1.html</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <link rel="stylesheet" type="text/css" href="css/Change.css">  <script language="javascript">     function test4(event) {  //获取样式表中所有class选择器都获得  var ocssRules = document.styleSheets[0].rules;  //从ocssRules中取出你希望的class  var style1 = ocssRules[0];  if(event.value == "黑色") {      //window.alert(style1.style.backgroundColor);     style1.style.backgroundColor="black";  }else if(event.value == "红色") {      style1.style.backgroundColor="red";  }   }   </script></head><body>  <div id="div1" class="style1">div1</div>  <input type="button" value="黑色" onclick="test4(this)"/>  <input type="button" value="红色" onclick="test4(this)"/>  </body></html>


热点排行