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

关于取消代码的疑惑

原来我设想了两种取消的方法

第一种方案是通过提前定义变量,记录元素之前的属性,然后设定点击reset按钮后 把所有的属性都给 重新设定成原来的样子。

第二种方案可以 定义一个不同id 的css 样式,通过改变 id ,实现加载css模块内的属性 来达到恢复默认值

第一种我没有去实施,理论上肯定是没有问题的。只是比较繁琐点而已

第二种我去重新定义了一个 叫做txt1的css 模块(txt1定义的css和原来txt内的css完全一致),通过document.getElementById("txt").id="txt1"; 来变更整体的id 实现css重新渲染。 奇怪的是我 确实改变

了元素的id 但是期待的样式却没有恢复成原来的样子。还是保持变更后的样子。

这是为什么呢? 在什么条件下css会重新渲染那?



提问者:羽动风清 2015-03-14 21:52

个回答

  • 羽动风清
    2015-03-27 11:15:48

    问题弄明白了  返回不到原来的样式 是因为 css 内联 和嵌入的优先级不一样 , 我们之前通过changecolor() 设定过的颜色格式 变成了 内嵌式的 ,如果改变了 元素的 id 让它重新 加载别的样式,因为优先级不如 内嵌的高 所有 之前更改的颜色还是不会反映过来  

  • 文人骚客2077
    2015-03-16 19:24:36

    从你上米俺的代码看,你的txt,txt1的样式是一样的啊~,你样式一样的,点击肯定没有效果了。

  • 羽动风清
    2015-03-16 08:59:53

    <!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;}

    #txt1{

        height:400px;

        width:600px;

    border:#333 solid 1px;

    padding:5px;

       }

    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="改变宽高" >

        <input type="button" value="隐藏内容" >

        <input type="button" value="显示内容" >

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

      </form>

      <script type="text/javascript">

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

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

    function changecolor(){

    temp.style.color="red";

    }


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



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



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



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

    function rest(){

    temp.id="txt1";

    }



      </script>

    </body>

    </html>


  • 文人骚客2077
    2015-03-15 00:28:10

    你有代码吗? 

        我觉得可能是你的JS代码的位置有问题,你的思想是没有问题的,你用window.onload = function(){};将你的JS代码包裹住试试。