DOM--层控制

浏览一些网页时，会点击登录按钮时，会在页面上显示一个登录圣话框，要用户输入用户名和密码，这些就是层的控制，即div控件的显示与隐藏功能。

主要用到的是它的style.display属性，如果div.style.dispaly="none"则此层不会显示，如果不为none就会显示它。

还有一些控件，如button中有个属性为disabled，会显示是否可用。 style中是控件的一些样式，如position,background等。

要关闭text中的输入法，只需设置它的style="ime-mode:disabled"即可。

window.returnfalse表示不再向下执行，即取消的意思。如下图：

如下的代码：

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function showdiv() {
            document.getElementById("div1").style.display = "";
        }

        function hidediv() {
            document.getElementById("div1").style.display = "none";
        }

        function disabledbutton() {
            document.getElementById("dybtn").disabled = "true";
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="显示层" onclick="showdiv()"/>
    <input type="button" value="不显示层" onclick="hidediv()" />
    <input type="button" value="按钮不可用" onclick="disabledbutton()" />
    <input type="text" style="ime-mode:disabled"  onpaste="return false;" />  //关闭输入法，且不能对它进行粘贴。
    </div>

    <br />
    <div id="div1" >
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" id="dybtn" value="动态的层" style="background-color:red"  />
    </div>
    </form>
</body>
</html>

另div中输入连续英文的字符是不会自动换行的，中文没问题。

 

posted on 2013-05-20 16:16  天上星  阅读(506)  评论(0)  编辑  收藏  举报

导航