问答详情
源自:3-6 控制类名(className 属性)

怎么点更改外观能在1、2来回切换

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>className属性</title>

<style>

    body{ font-size:16px;}

    .one{

border:1px solid #eee;

width:230px;

height:50px;

background:#ccc;

color:red;

    }

.two{

border:1px solid #ccc;

width:230px;

height:50px;

background:#9CF;

color:blue;

}

</style>

</head>

<body>

    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <input type="button" value="添加样式" onclick="add()"/>

<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>

    <input type="button" value="更改外观" onclick="modify()"/>


<script type="text/javascript">

  function add(){

     var p1 = document.getElementById("p1");

       p1.className="one";

  }

  function modify(){

     var p2 = document.getElementById("p2");

          p2.className="two"; 

  }

</script>

</body>

</html>


提问者:sevenLong_七龙 2015-11-30 15:46

个回答

  • jikaiyang
    2015-12-15 19:30:36

    感觉并没有什么用

  • sevenLong_七龙
    2015-11-30 16:22:02

    function modify(){

         var p2 = document.getElementById("p2");

        if(p2.className=="one")

             {

                 p2.className="two";

             }else

             {

                 p2.className="one";

             }

      }

    额,前面IF里忘记了个等号了。=。=

  • 一毛钱
    2015-11-30 16:07:25

    判断一下

     function add(){
         var p1 = document.getElementById("p1");
         if(p1.className=="one"){
         p1.className="two";
         }else{
         p1.className="one";
         }
      }

    下面的方法和这个一样