DOM--层控制

最新推荐文章于 2024-11-10 21:10:41 发布

转载最新推荐文章于 2024-11-10 21:10:41 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yagzh2000/archive/2013/05/20/3088799.html

文章标签：

#javascript #ViewUI

本文探讨了网页中层的控制技术，包括div控件的显示与隐藏、按钮的可用性控制及输入法关闭方法，并通过代码示例展示了如何使用JavaScript实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览一些网页时，会点击登录按钮时，会在页面上显示一个登录圣话框，要用户输入用户名和密码，这些就是层的控制，即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>