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;方法同样也可以实现。

 

作者：白开水

出处：http://www.cnblogs.com/hongxp/

本文以学习、总结和分享为主，如需转载，请联系本人，标明作者和出处，非商业用途！

posted @ 2016-12-14 18:40  hxiuping  阅读(672)  评论(0)    收藏  举报