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

源自：3-5 显示和隐藏（display属性）

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

如题，怎么写代码？

我试了一下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代码可能有错（汗……隔了有段时间了

提问者：慕工程8099857 2016-07-03 19:22

个回答

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

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的节点元素是否还在页面上占了位，就马上能知道了。

2

美好的时光守护: 2016-07-03 19:57:47

<style>
        .my{
            position:absolute;
            top:300px;
            left:20px;
        }
    </style>

top和left后是冒号