js修改html的css样式

发表时间:2017-05-12 16:13:57 浏览量( 24 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

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

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

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

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

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

<input type="button" value="变大" onclick="big()" />
<input type="button" value="缩小" onclick="small()" />
<div id="mydiv" style="width: 400px;height: 400px"></div>

使用第一种方式:

function big(){
         var mydiv=document.getElementById("mydiv");
         mydiv.style.width="800px";
         mydiv.style.height="800px";      
}

当然我们也可以先定义一个css类定义:

<style type="text/css">
.small {
   width: 200px;
   height: 200px;
   background-color: green;
}
</style>

然后使用第二种方式:

    function small(){
         var mydiv=document.getElementById("mydiv");
         //修改类选择
         mydiv.className="small";
}

下面我们再做两个例子:

1、轮询框示例

虽然这个样式不好看,不过也可以看出我们平时经常见到的轮询框其实就是通过修改style样式的display属性。

display:none;//隐藏

display:block;//显示。

实现代码,html排版如下:

<span onmouseover="showdiv('div1')">标题1</span> |
<span onmouseover="showdiv('div2')">标题2</span> |
<span onmouseover="showdiv('div3')">标题3</span>
<div id="div1" class="normal">我是第一个</div>
<div id="div2" class="normal hidediv">我是第二个</div>
<div id="div3" class="normal hidediv">我是第三个</div>

对应的css样式如下:

<style type="text/css">
.normal {
   width: 400px;
   height: 400px;
   background-color: red;
}
.hidediv {
   display: none;
}    
</style>

js控制如下:

    function showdiv(sdiv){
     
          var div1=document.getElementById("div1");
          var div2=document.getElementById("div2");
          var div3=document.getElementById("div3");
     
         //先把全部隐藏
         div1.style.display="none";
         div2.style.display="none";
         div3.style.display="none";
         
         //再把当前显示
        document.getElementById(sdiv).style.display="block";
     
}