index的注释与理解（1）JS遮罩层如何写之（二）

一、在Window.οnlοad=function () {}源代码：

document.getElementById("btn_showlogin").onclick = showMinLogin;     //触发ID为“btn_showlogin”的元素的单击事件，Click是该元素的方法，不是属性。   

function showMinLogin(){}//单击事件函数

1、document.getElementById()方法

A :语法：oElement = document .getElementById ( sID )

参数：sID――必选项。字符串 (String) 。

返回值：oElemen――对象 (Element) 。

说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null 

注意： document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是“ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才是具体的值！

B:实例如下：

  *   document.getElementById('hdrPageHeader_lblTitle')           

  *   表示的意思是：获取ID 为:hdrPageHeader_lblTitle 的对象 
                                                               
 
 * <scriptlanguage="javascript">                                     


 *<!--                                                               


 * var idtext=document.getElementById('hdrPageHeader_lblTitle')       


 *alert(idtext.innerText)                                           


 *//-->                                                             


 *</script>        

2. document 对象

属性：title，bgColor，url （使用：document.title）

方法：

focus	使得元素得到焦点并执行由 onfocus 事件指定的代码。
getElementById	获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName	根据 NAME 标签属性的值获取对象的集合。
getElementsByTagName	获取基于指定元素名称的对象集合。

3、JavaScript三种绑定事件方式之间的区别

1和2方式经常用到，第三种方式用“addEventListener”可以绑定多次同一个事件，且都会执行，e而在DOM结构中如果绑定俩个“Onclick”事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

　　1. <div id="btn" οnclick="clickone()" οnclick="clicktwo()"></div> //直接在DOM里绑定事件

　　　　<script>

　　　　　function clickone(){ alert("hello"); } //执行这个

　　　　　function clicktwo(){ alert("world!"); }

　　　　</script>

　　2. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }  //在脚本里面绑定

　　　　　document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个

　　　　</script>

　　3. <div id="btn"></div>

　　　　<script>

　　　　　document.getElementById("btn").addeventlistener("click",clickone,false);//通过侦听事件处理相应的函数

　　　　　function clickone(){ alert("hello"); } //先执行

　　　　　document.getElementById("btn").addeventlistener("click",clicktwo,false);

　　　　　function clicktwo(){ alert("world"); } //后执行

　　　　</script>

二、在document.getElementByld("btn_showlogin").οnclick=showMinLogin源代码：

    function showMinLogin(){
        var mini_login = document.getElementsByClassName("mini_login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "block";
        cover.style.display = "block";
        
        mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
        mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
    }

1、HTML DOM getElementsByClassName()的方法

var mini_login = document.getElementsByClassName("mini_login")[0];

在 class="mini_login" 的列表中修改 class="mini_login" 的第一项(索引值为 0) 的文

document.getElementsByClassName()方法返回文档中所有指定类名的元素集合，作为NodeList对象。

NodeList对象代表一个有顺序的节点列表。NodeList对象我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）

语法:

element.getElementsByClassName(classname)

classname   string    你需要获取的元素类名，多个类名使用空格分隔，如“test   demo”

提示：你可以使用NodeList对象的Length属性来确定类名的元素个数，并循环各个元素来获取你需要的那个元素。

实例：

查看<div>元素中有多少个class=“child”的元素（使用NodeList的length属性）：

var x=document.getElementBy("myDIV").getElementsByClassName("child").length;

x的输出结果为：

3

更多实例：

实例1：

修改<div>元素中第二个class=“child”元素的背景颜色：

var x = document.getElementById("myDIV");
x.getElementsByClassName("child")[1].style.backgroundColor="red";



运行结果：


实例2：
修改class="example"元素中第一个类名为“child”和“color”元素的背景颜色：
var x= document.getElementsByClassName("example")[1];
x.getElementsByClassName("child color")[0].style.backgroundColor="red";
具体是，修改<div>块中第二个Class=“example”中第一个类名为class=“child  color”的元素。
运行结果：

实例3：
修改<div>元素中class="child'的所有元素背景颜色：

var x=document.getElementById("myDIV");
var y=x.getElementsByClassName("child");
var i;
for(i=0;i<y.length;i++){
y[i].style.backgroundColor="red";
}
运行结果：



2、HTML DOM Style display 属性

        mini_login.style.display = "block";
        cover.style.display = "block";


定义和用法：
display属性设置或返回元素的显示类型。
HTML中元素大多是“内联”或“块”元素；一个内联元素，在其左侧和右侧都是浮动内容；一个块元素填满整个行，并没有可显示在其左侧和右侧。
display属性还允许作者显示或隐藏一个元素。与visibility属性类型。然而，如果设置display：none，将隐藏整个元素，如果您设置visibility：hidden，元素的内容将不可见，但元素保持原来的位置和大小。



语法：
设置display属性
Object.style.display=“value”
返回display属性：
Object.style.display


 
 

值

描述

block

元素呈现为块级元素。

compact

元素呈现为块级元素或内联元素，取决于上下文。

inherit

display 属性的值从父元素继承。

inline

默认。元素呈现为内联元素。

inline-block

元素呈现为内联盒子内的块盒子。

inline-table

元素呈现为内联表格（类似 <table>），表格前后没有换行符。

list-item

元素呈现为列表。

marker

该值在盒子前后设置内容作为标记（与 :before 和 :after 伪元素一起使用，否则该值与 "inline" 是相同的）。

none

元素不会被显示。

run-in

元素呈现为块级或内联元素，取决于上下文。

table

元素呈现为块级表格（类似 <table>），表格前后带有换行符。

table-caption

元素呈现为表格标题（类似 <caption>）。

table-cell

元素呈现为表格单元格（类似 <td> 和 <th>）。

table-column

元素呈现为单元格的列（类似 <col>）。

table-column-group

元素呈现为一个或多个列的分组（类似 <colgroup>）。

table-footer-group

元素呈现为表格页脚行（类似 <tfoot>）。

table-header-group

元素呈现为表格页眉行（类似 <thead>）。

table-row

元素呈现为表格行（类似 <tr>）。

table-row-group

元素呈现为一个或多个行的分组（类似 <tbody>）。
3、HTML Style left属性


mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
1、补充  left定义和用法：

left属性设置或返回定位元素的左部位置。
该属性规定了元素的左部位置，包括：内边距，滚动条，边框和外边距
提示：一个定位元素是元素的position属性被设置为：relative（相对）、absolute(绝对)或fixed（固定）
语法：
设置left属性：
Object.style.left="auto|length|%|inherit"
返回left属性
Object.style.left


 
 

auto

默认。通过浏览器计算左部的位置。

length

使用 px、cm 等单位定义元素的左边到最近一个具有定位设置父元素的左部边缘的位置。可使用负值。

%

定义元素的左边到最近一个具有定位设置父元素的左部边缘的百分比位置。

inherit

left 属性的值从父元素继承。
2、

 
 

document.body

返回文档的body元素