简单的总结下用 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操作---登录例子总结的更多相关文章

  1. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  2. js dom 操作

    JS的DOM操作   1DOM是文档对象模型,这种模型为树模型:文档是指标签文档,对象是指文档中每个元素:模型是指抽象化的东西. 2间隔与延迟间隔执行一段代码(函数):window.setInterv ...

  3. JS—DOM操作

    节点分为三类: 1.元素节点:标签<div></div> 2.文本节点:标签内的纯文本. 3.属性节点:标签内的属性,id或class 查找元素: getElementById ...

  4. js——DOM操作（一）

    DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树 ...

  5. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  6. JS DOM操作 函数 事件 阻止事件冒泡

    一 函数 1.字符串函数 s.tolowerCase( ):    -- 变小写 s.toupperCase( ):   -- 变大写 s.substr( 2 , 8 ):     -- 截取     ...

  7. JS DOM操作（五） Window.docunment对象——操作元素

    定位: var a = document.getElementByIt( "id" ) 同辈元素 var b = a.nextSibling;            -- 找 a ...

  8. JS DOM操作（二） Window.docunment对象——操作样式

    一 对元素的定位 在 js 中可以利用 id.class.name.标签名进行元素的定位 id.class  用在客户端 name  用在服务端 用 id 定位                  -- ...

  9. JS DOM操作（一） 对页面的操作

    DOM ——文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标 ...

随机推荐

  1. HDU 3264 Open-air shopping malls ——（二分+圆交）

    纯粹是为了改进牛吃草里的两圆交模板= =. 代码如下: #include <stdio.h> #include <algorithm> #include <string. ...

  2. java 获取指定日期

    //可以设置指定那一天:例如,最近一周,参数传入-7,最近一月,参数传入-30...private String getBeginDate(int date) throws ParseExceptio ...

  3. [Angular Tutorial] 13 -REST and Custom Services

    在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...

  4. scala系列--基础语法

    Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的. 区分大小写 -  Scala是大小写敏感的,这意味着标识Hello 和 hello在Scala中会有不同的含义. 类 ...

  5. gridview属性

    1.列头充满:AutoSizeColumnsMode, Fill. 2.列内容居中:ColumnHeadersDefaultCellStyle, MiddleCenter. 3.行内容居中:RowsD ...

  6. jquery中html()或text()方法获取或设置p标签的值

    html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可 ...

  7. Subpub 订阅/发布

    var Pubsub = (function (window) { window.handlers = {}; var o = { pub: function () { var args = Arra ...

  8. MySQL5.6多实例部署

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://suifu.blog.51cto.com/9167728/1850560 无论是迫 ...

  9. linux 下 tomcat 之 配置静态资源路径

    1.找到配置文件 找到tomcat\conf\server.xml 2.找到Host 3. 添加 Context <Host name="localhost" appBase ...

  10. html中object标签详解

        定义和用法 object标签定义一个嵌入的对象.请使用此元素向您的 XHTML 页面添加多媒体.此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码. &l ...