想让事件执行前后按钮的位置不变

来源:3-5 显示和隐藏(display属性)

慕工程8099857

2016-07-03 19:22

如题,怎么写代码?

我试了一下css的定位,发现没有用,不知何故

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        document.getElementById("con").style.display="none";
        }  
        function showtext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display="block";
        }
    </script> 
    <style>
        .my{
            position:absolute;
            top=300px;
            left=20px;
        }
    </style>
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> 
    <form>
    <div class="my">
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> </div>
    </form>
</body> 
</html>

css代码可能有错(汗……隔了有段时间了

写回答 关注

3回答

  • Long431X
    2016-07-03 19:39:26
    已采纳

    function hidetext() 
      { 
      var mychar = document.getElementById("con");
            mychar.style.visibility="hidden";
      } 
      function showtext() 
      { 
      var mychar = document.getElementById("con");
            mychar.style.visibility="visible";
      }

    慕工程809...

    原来如此,这个是我之前没学到的内容,看来掌握的css还有缺漏。总之非常感谢!

    2016-07-03 21:35:52

    共 1 条回复 >

  • Lis丶
    2016-07-07 10:26:09

    虽然你已经采纳了最佳,但是还是得说一下的。

    document.getElementById("con").style.display="none";

    ----- 这个可以让id = con 的节点元素隐藏并且释放页面空间的。

    document.getElementById("con").style.visibility="hidden";

    ----- 只能让 id = con 的节点元素隐藏,其实它还是在页面的,只是显示空白而已。如果你用学了"盒子模型",浮动一下,看看visibility的节点元素是否还在页面上占了位,就马上能知道了。

  • 美好的时光守护
    2016-07-03 19:57:47
    <style>
            .my{
                position:absolute;
                top:300px;
                left:20px;
            }
        </style>

    top和left后是冒号

    qq_Dre... 回复慕工程809...

    这种错误应该说就不能犯。。。

    2016-07-04 15:38:19

    共 2 条回复 >

JavaScript入门篇

JavaScript做为一名Web工程师的必备技术,本教程让您快速入门

739817 学习 · 9566 问题

查看课程

相似问题