问答详情
源自：3-6 控制类名（className 属性）

改了样式如何再恢复样式呢?

<!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()"/>

    <input type="button" value="恢复样式" onclick="back1()">

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

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

    <input type="button" value="恢复样式" onclick="back2()">

<script type="text/javascript">

   function add(){

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

      p1.className="one";

   }

   function modify(){

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

      p2.className="two";

   }

   function back1(){

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

      p3.className="two";

   }

   function back2(){

      var p4 = document.getElementById("p2")

      p4.className="one";

   }

</script>

</body>

</html>


提问者：qq_慕尼黑9285125 2019-10-23 13:04

个回答

  • 慕九州5249392
    2019-11-29 15:54:44

    <!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()" id="p3"/>
        <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
        <input type="button" value="更改外观" onclick="modify()"/>

        <script type="text/javascript">
           function add(){
              var p1 = document.getElementById("p1");
              var p3= document.getElementById("p3")
              if(p1.className=="")
              {p1.className="one";p3.value="恢复"}
              else {p1.className="";p3.value="添加元素"}
           }
           function modify(){
              var p2 = document.getElementById("p2");
              p2.className="two"
           }
        </script>
    </body>
    </html>

    可以参考下

    0
  • ural
    2019-10-23 22:19:43

    加个按钮，object.className="none";

    0