js DOM操作---登录例子总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

简单的总结下用 javascript DOM 实现简易登录框例子，下面是简单的模拟登录，没有具体的登录样子，但只是模拟，整理下思路。

页面简单布局，我这个确实太简单了，看代码：

<body>

        <div id="box"></div>

</body>

这里给 box 简单的样式：

#box {

                width: 400px;

                height: 300px;

                background: #ccc;

                border: 10px solid #f00;

    }

现在页面的效果如下图：

系统登录通常情况下是在页面中居中显示，我们用 css 的方式也可以让它居中，给 box 加上下面的代码：

css ①

position: absolute;

left: 50%;

top: 50%;

margin-left: -210px;

margin-top: -160px;

css ②

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

加上css ① 或者 css ② 都可以，效果如下：

接下来，我们看下 javascript 让登录框居中的方法：

<script>

            /*

             *  元素的 left  = (可视区的宽度 - 元素的宽度)/2

             *  元素的 top  = (可视区的高度 - 元素的高度)/2

             */

            window.onload = function(){

                var box = document.getElementById("box");

                // l   left的值

                var l = (document.documentElement.clientWidth - box.offsetWidth)/2;

                // t  top的值

                var t = (document.documentElement.clientHeight - box.offsetHeight)/2;

                /*box.style.left = l + 'px';

                box.style.top = t + 'px';*/

            }

        </script>

我们也可以考虑用更简单的方法，用 position：fixed;方法同样也可以实现。