index的注释与理解(1)JS遮罩层如何写之(二)
来源:互联网 发布:网络就是个粪坑 编辑:程序博客网 时间:2024/06/05 13:31
一、在Window.onload=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 的对象2. document 对象* <scriptlanguage="javascript"> *<!-- * var idtext=document.getElementById('hdrPageHeader_lblTitle') *alert(idtext.innerText) *//--> *</script>
属性:title,bgColor,url (使用:document.title)
方法:
focus
使得元素得到焦点并执行由 onfocus 事件指定的代码。
getElementById
获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName
根据 NAME 标签属性的值获取对象的集合。
getElementsByTagName
获取基于指定元素名称的对象集合。
3、JavaScript三种绑定事件方式之间的区别1和2方式经常用到,第三种方式用“addEventListener”可以绑定多次同一个事件,且都会执行,e而在DOM结构中如果绑定俩个“Onclick”事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
1. <div id="btn" onclick="clickone()" onclick="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").onclick=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元素呈现为块级元素或内联元素,取决于上下文。inheritdisplay 属性的值从父元素继承。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 等单位定义元素的左边到最近一个具有定位设置父元素的左部边缘的位置。可使用负值。%定义元素的左边到最近一个具有定位设置父元素的左部边缘的百分比位置。inheritleft 属性的值从父元素继承。2、document.body返回文档的body元素
- index的注释与理解(1)JS遮罩层如何写之(二)
- index的注释与理解(1)遮罩层如何写之(二).1
- index的注释与理解(1)JS遮罩层如何写之Window.onload
- index的注释和理解之HTML-body部分
- 如何理解Lucene的Index(索引)文档模型
- FGD模型的理解 和 cvbgfg_acmmm2003 源代码注释(二)(
- Three.js(二)LOD源码注释
- node.js学习之路(二)之“深入理解面向对象的JavaScript”
- 数据库二:深入理解DB2索引(Index)
- 通俗易懂CSS(二)-这样分析理解z-index
- 利用JS 事件 与 Cnavas绘图 以及 H5 缓存写的一个手势解锁(二)
- 配置文件的读与写 (二)
- js深入理解(二)
- 如何写文档(二)
- 科技论文的几种类型-如何写好科技论文之我见(二)
- three.js 源码注释(二)Math/color.js
- three.js 源码注释(二十)Core/Clock.js
- three.js 源码注释(二十一)Core/EventDispatcher.js
- 深入理解uboot 2016
- shell中exec解释
- Qt总结
- VM12中CentOS7以NAT的方式连接网络的方法
- 极简Node教程-七天从小白变大神(一:你需要Express)
- index的注释与理解(1)JS遮罩层如何写之(二)
- Python pass 语句
- boost时间的操作
- urllib库python2和python3具体区别
- 文章标题 POJ 1185 : 炮兵阵地 (状压DP)
- C/C++内存管理:malloc/calloc/realloc区别和联系
- iOS多线程全套:线程安全问题,GCD的使用,NSOperation的使用
- Android ViewPager酷炫的卡片滑动效果
- vs编译sqlite源码