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