15、js修改html的css样式

学习目标：

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

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

学习过程：

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

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

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

另外一种就是可以定义一个新的样式类，然后修改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 id="divt" ></div>
	<hr/>

使用第一种方式：

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

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

 

1、轮询框示例

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

display:none;//隐藏

display:block;//显示。

实现代码，html排版如下：

	<span id="show1span" style="color: red;cursor: pointer;" onmouseover="showdiv('show1')">标题一</span> | <span id="show2span" onmouseover="showdiv('show2')" style="cursor: pointer;">标题二</span> | <span id="show3span" onmouseover="showdiv('show3')" style="cursor: pointer;">标题三</span>
	
	<div class="cc" id="show1div">
	    内容一
	</div>
	<div class="cc" style="display: none;" id="show2div">
	    内容二
	</div>
	<div class="cc"  style="display: none" id="show3div">
	    内容三
	</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=document.getElementById(showspanid);//当前要显示
      var showdiv=document.getElementById(showdivid);//当前要显示
      
      //全部隐藏
      document.getElementById("show1div").style.display="none";
      document.getElementById("show2div").style.display="none";
      document.getElementById("show3div").style.display="none";
      
      document.getElementById("show1span").style.color="black";
      document.getElementById("show2span").style.color="black";
      document.getElementById("show3span").style.color="black";
      
      //显示当前
      showdiv.style.display="block";
      showspan.style.color="red";
   }

</script>