15、js修改html的css样式

学习目标：

1、使用JS操作html的css样式

2、通过轮询框示例加深JS的了解

学习过程：

之前我们学习了使用js修改html的属性达到一种交互的效果，事实上，使用js修改html的css样式可以实现一种更加绚丽的交互效果。这节课我们就学习一下如何使用js修改html的样式的方法。

要修改html的样式有两种方式，一种是修改style属性

html标签对象.属性="属性值"。

另外一种就是可以定义一个新的样式类，然后修改html的类属性。

html标签对象.className="css类"。如：

css的定义：

<style type="text/css">
#divt {
	width: 100px;
	height: 100px;
	background-color: black;
}

.bb{
   border: 1px solid black;
   background-color: red;
}


</style>

html的定义：

	<input type="button" value="放大" onclick="big()" />
	<input type="button" value="改变" onclick="rever()" />
	<div  ></div>
	<hr/>

使用第一种方式：

<script type="text/javascript">
	var x = 100;
	function big() {
		var divt = ("divt");
		//修改样式
		x += 10;
		 = x;
		 = x;
		 = "#ffddcc";
	}

	function rever() {
         ="bb";
	}
</script>

 

1、轮询框示例

下面我们再做两个例子：，虽然这个样式不好看，不过也可以看出我们平时经常见到的轮询框其实就是通过修改style样式的display属性。

display:none;//隐藏

display:block;//显示。

实现代码，html排版如下：

	<span  style="color: red;cursor: pointer;" onmouseover="showdiv('show1')">标题一</span> | <span  onmouseover="showdiv('show2')" style="cursor: pointer;">标题二</span> | <span  onmouseover="showdiv('show3')" style="cursor: pointer;">标题三</span>
	
	<div class="cc" >
	    内容一
	</div>
	<div class="cc" style="display: none;" >
	    内容二
	</div>
	<div class="cc"  style="display: none" >
	    内容三
	</div>

对应的css样式如下：

.cc{
   width: 100px;
	height: 100px;
	border: 1px solid black;
}

js控制如下

<script type="text/javascript">
   function showdiv(cdivid){
      var showspanid=cdivid+"span";
      var showdivid=cdivid+"div";
      
      var showspan=(showspanid);//当前要显示
      var showdiv=(showdivid);//当前要显示
      
      //全部隐藏
      ("show1div").="none";
      ("show2div").="none";
      ("show3div").="none";
      
      ("show1span").="black";
      ("show2span").="black";
      ("show3span").="black";
      
      //显示当前
      ="block";
      ="red";
   }

</script>