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/
本文以学习、总结和分享为主，如需转载，请联系本人，标明作者和出处，非商业用途！
js DOM操作---登录例子总结的更多相关文章
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- js dom 操作
JS的DOM操作 1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...
- JS—DOM操作
节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...
- js——DOM操作（一）
DOM:Document Object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...
- js dom 操作技巧
1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...
- JS DOM操作 函数 事件 阻止事件冒泡
一 函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
- JS DOM操作（五） Window.docunment对象——操作元素
定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling; -- 找 a ...
- JS DOM操作（二） Window.docunment对象——操作样式
一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class 用在客户端 name 用在服务端 用 id 定位 -- ...
- JS DOM操作（一） 对页面的操作
DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...
随机推荐
- 编译时.test文件报错无法解决的方法,关闭test编译
有几次遇到从网上下载到的iOS开源代码编译报错,报错位置为Test Target的源文件,我就挺奇怪我又没做测试为啥会编译Test Target的源文件,之前的暴力解决方法是把Test Target直 ...
- Android和BLE模块连接通信
首先,进行一下科普: 1.BLE(Bluetooth Low Energy),蓝牙4.0核心profile,主要特点是快速搜索,快速连接,超低功耗保持连接和数据传输,缺点:数据传输速率低,由于其具有低 ...
- 蓝牙协议 基于TI cc2540 模块的理解（转）
源:蓝牙协议 基于TI cc2540 模块的理解 Bluetooth 4.0开发 Platform:TI IC:cc2540 Environment:windows 7 tools:IAR 8.20. ...
- Zookeeper的基本概念
Reference: http://mp.weixin.qq.com/s?src=3×tamp=1477979201&ver=1&signature=bBZqNrN ...
- 外显率&显性上位
外显率(penetrance): 外显率是指条件下,群体中某一基因型(通常在杂合子状态下)个体表现出相应表型的百分率.外显率等于100%时称为完全外显(complete penetranc)低于100 ...
- 必备的实用jQuery代码段（1）
1. 如何正确地使用toggleClass: //切换(toggle)类允许你根据某个类的 //是否存在来添加或是删除该类. //这种情况下有些开发者使用: a.hasClass('blueButto ...
- swift 定位 根据定位到的经纬度转换城市名
好久没写随笔了 最近这段时间项目有点紧 天天在加班 国庆 一天假都没放 我滴娃娃 好啦 牢骚就不发了 毕竟没有什么毛用 待我那天闲了专门写一篇吐槽的随笔
- MySQL生产库全库备份脚本
创建一个单独的备份用户backup,不要用root 创建备份目录 :mkdir -p /databackup/fullbackup mysql> grant SELECT,RELOAD,SHOW ...
- redhat+11g+rac 安装数据库软件时只有一个节点可选
在安装数据库软件时,只能检测到一个节点 650) this.width=650;" title="捕获.JPG" src="http://s3.51cto.co ...
- SQL查询根节点
/* 标题:查询指定节点及其所有父节点的函数 作者:爱新觉罗.毓华(十八年风雨,守得冰山雪莲花开) 时间:2008-05-12 地点:广东深圳 */ create table tb(id varcha ...