问答详情
源自:4-1 编程挑战

编程挑战,使用类来做取消功能,求解?

head中定义一个类.txt具体参数与原txt的参数相同,调用取消功能函数后,将类.txt,赋给obj.className ,为什么没有显示的结果?

提问者:慕桂英8820456 2016-07-18 09:28

个回答

  • 慕桂英8820456
    2016-07-27 17:30:28

    这么说,var myfir = document.getElementById("txt");已经取得id = txt的ID;
    
    CSS的定义类    .txt{
                    height:400px;
                    width:600px;
                    color:#000;
                    background-color:#fff;
                    }
     此处.txt完全可以换一个名字,比如 .init ;相应的下面的myfir.className = "init";
     
     而前面的<div id="txt">改为<div id = "txt" class = "init">,这样还是无法实现所想要的功能;
     
     后来在网上搜索了,问题是id的优先级高于class的,所以优先显示id的样式


  • 套子里的海怪
    2016-07-26 13:03:38

    myfir.className的用法回头再看看原来的课程,这里的className是你要改名的class的名字,然而你的代码里并没有给任何标签添加class。

    代码里用的是Id,不是class

    <h2 id="con">JavaScript课程</H2>

      <div id="txt"> 



  • 慕桂英8820456
    2016-07-18 09:53:48

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />

    <title>javascript</title>

    <style type="text/css">

    body{font-size:12px;}

    #txt{

        height:400px;

        width:600px;

    border:#333 solid 1px;

    padding:5px;}

    .txt{

        height:400px;

        width:600px;

        color:#000;

        background-color:#fff;

        }

    p{

    line-height:18px;

    text-indent:2em;}

    </style>

    </head>

    <body>

      <h2 id="con">JavaScript课程</H2>

      <div id="txt"> 

         <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>

            <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>

            <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>

            <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>

      </div>

      <form>

      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->

        <input type="button" value="改变颜色" onclick="changeColor();">  

        <input type="button" value="改变宽高" onclick="changeWHith();">

        <input type="button" value="隐藏内容" onclick="hideWindow();">

        <input type="button" value="显示内容" onclick="showWindow();">

        <input type="button" value="取消设置" onclick="cleanSet();">

      </form>

      <script type="text/javascript">

    //定义"改变颜色"的函数

        var myfir = document.getElementById("txt");

        function changeColor()

        {      

            myfir.style.color = "red";

            myfir.style.backgroundColor = "#ccc";

        }

    //定义"改变宽高"的函数

        function changeWHith()

        {

            myfir.style.width = "400px";

            myfir.style.height = "200px";

        }

    //定义"隐藏内容"的函数

        function hideWindow()

        {

            myfir.style.display = "none";

        }

    //定义"显示内容"的函数

        function showWindow()

        {

            myfir.style.display = "block";

        }

    //定义"取消设置"的函数

        function cleanSet()

        {

            if(confirm("是否恢复初始值?"))

                myfir.className = "txt";          

        }

      </script>

    </body>

    </html>


  • 幕布斯9743453
    2016-07-18 09:46:16

    没看到源码,不好说!

  • Doc_Zh
    2016-07-18 09:38:36

    没有源码谁知道为什么 ? 检查是不是少了分号或者双引号。