Question

当我点击按钮时，我希望文本显示在网页顶部的红色横幅中。我已经查看了google和youtube，无法在任何地方找到解决方案。如果有人可以查看我的代码，看看我是如何让这项工作取悦的！

<html>


<head>

<title> Non-Modal Alert Messages</title>


                        <link rel="stylesheet" type="text/css" href="nonmodal1.css">


                <script type = "text/javascript">



                                    function reveal(){


                                    document.getElementById('theDiv').innerHTML='You have touched the button!'}

                                    function hide(){
                                    document.getElementById('theDiv').innerHTML=''  }



    </script>

</head>






            <body>



                    <form> 

<input type = "button" onclick = "reveal()" value = "Button">

<input type = "button" onclick = "hide()" value = "Close Alert">
</form>


<div id = "theDiv">

</div>

</body>




<html>

Answer 1

你的意思是这样吗？

您的代码主要适用于我。您只需要为div添加样式信息，并将其放在DOM层次结构中，使其显示在顶部。还有其他方法可以处理这种情况，这可能更合适，例如对div使用静态定位，因此它始终位于窗口的顶部，并在您想要显示时切换其可见性。

<html>
<head>

    <title> Non-Modal Alert Messages</title>
    <link rel="stylesheet" type="text/css" href="nonmodal1.css">


    <script type="text/javascript">
        function reveal() {
            document.getElementById('theDiv').innerHTML = 'You have touched the button!'
        }

        function hide() {
            document.getElementById('theDiv').innerHTML = ''
        }
    </script>

</head>
<body>
    <div id="theDiv" style="background-color: red; color: white;">
    </div>

    <form>
        <input type="button" onclick="reveal()" value="Button">
        <input type="button" onclick="hide()" value="Close Alert">
    </form>
</body>

非模态功能，在红色横幅中出现在页面顶部的警报

1 个答案: