index的注释与理解(1)遮罩层如何写之(二).1
来源:互联网 发布:淘宝u站申请入口 编辑:程序博客网 时间:2024/05/22 09:43
接之(二)
3、Style Top属性
top属性设置和返回定位元素的顶部位置
语法:
设置top属性:
Object.style.top ="auto|length|%|inherit
返回top属性
Object.style.top
4、JavaScript ScollHeight 和JavaScript Scollwidth
ScollHeight:此属性返回元素的实际高度,不包括滚动条所占用的空间。(例如Google浏览器下滚动条的厚度是17px)
实例1
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#antzone { width:100px; height:100px; background:#ccc; margin:5px; padding:10px; border:15px solid blue; overflow:auto;}</style><script>window.onload = function () { var str = ""; str = antzone.scrollHeight + "<br/>"; str = str + antzone.clientHeight; antzone.innerHTML = str;}</script></head><body><div id="antzone"></div></body></html>上面例子div的内容没有超出它的高度,效果和clientHeight一样的,并没有体现出此属性(滚动)的作用。
scrollHeight属性值等于height+padding-top+padding-bottom。
运行结果:
实例2:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#antzone { width:100px; height:100px; background:#ccc; margin:5px; padding:10px; border:15px solid blue; overflow:auto;}#inner { width:30px; height:150px;//子元素的值 background:green;}</style><script>window.onload = function () { var str = ""; str = antzone.scrollHeight + "<br/>"; str = str + antzone.clientHeight; show.innerHTML = str;}</script></head><body><div id="show"></div><div id="antzone"> <div id="inner">蚂蚁部落</div></div></body></html>运行结果:
上面的代码中clientHeight属性值依然是120。
scrollHeight返回元素实际内容的宽度,值=子元素height值+父元素padding-top+父元素padding-bottom。
实例3:<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#antzone { width:100px; height:100px; background:#ccc; margin:5px; padding:10px; border:15px solid blue; overflow:auto;}#inner { width:150px; height:30px; background:green;}</style><script>window.onload = function () { var str = ""; str = antzone.scrollHeight + "<br/>"; str = str + antzone.clientHeight; show.innerHTML = str;}</script></head><body><div id="show"></div><div id="antzone"> <div id="inner">蚂蚁部落</div></div></body></html>运行结果:
JavaScript Scollwidth类似以上操作:scrollWidth属性值等于width+padding-left+padding-right。
scrollWidth返回元素实际内容宽度,值=子元素width值+父元素padding-left+父元素padding-right。
链接:http://www.softwhy.com/article-2519-1.html
mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
理解为:迷你登录小窗的左部位置是返回(HTML元素的整体高度和宽度-小窗真实的整体高度和宽度)/2+"px";
由于返回值为数字需要加px 单位,弄成像素。
四、document.getElementById("firstLine").onmousedown = moveLogin;
onmousedown触发事件:
定义:
onmousedown事件会在鼠标按键按下时发生。
提示:与onmousedown 事件相关联的事件发生次序(鼠标左侧/中间 按钮):
1、onmousedown
2、onmouseup
3、onclick
与onmousedown 事件相关联事件发生次序(鼠标右侧按钮):
1、onmousedown
2、onmouseup
3、oncontextmenu oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。语法:
在HTML中:
<element onmousedown = "someJavaScriptCode">
在JavaScript中:
<object.onmousedown = funcation(){SomeJavaScriptCode};
- index的注释与理解(1)遮罩层如何写之(二).1
- index的注释与理解(1)JS遮罩层如何写之(二)
- index的注释与理解(1)JS遮罩层如何写之Window.onload
- index的注释和理解之HTML-body部分
- 如何理解Lucene的Index(索引)文档模型
- FGD模型的理解 和 cvbgfg_acmmm2003 源代码注释(二)(
- 数据库二:深入理解DB2索引(Index)
- 通俗易懂CSS(二)-这样分析理解z-index
- 配置文件的读与写 (二)
- 如何写文档(二)
- 科技论文的几种类型-如何写好科技论文之我见(二)
- Effictive Go(二)格式与注释
- JAVA学习笔记二之(1)注释
- 如何写高质量的注释
- 如何写好的代码注释
- 如何写DOS下的设备驱动程序(二)
- LeetCode OJ 之 H-Index II(H指数 - 二)
- Java基础之面向对象(二)文档注释与设计模式
- signal(SIGCHLD, SIG_IGN)和signal(SIGPIPE, SIG_IGN);
- Socket异步通信及心跳包同时响应逻辑分析(最后附Demo)。
- 用内核对象进行线程同步——互斥量内核对象
- react.js路由(4.x):模拟一个用户登录2(登录判断、路由的多种加载方式)
- 网卡、交换机、网桥、路由器、网关分别工作于OSI模型哪一层
- index的注释与理解(1)遮罩层如何写之(二).1
- The Balance (hdu1709) 母函数
- 《战狼2》破34亿,大数据告诉你什么样的电影IP才能火?
- 想学习推荐系统,如何从小白成为高手?
- 2017/8/6 第十四天
- FastReport.Net 报表连接数据库
- Maven的安装和配置
- org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter问题解决
- 各种字节转换为byte(ConvertCodeUtility)工具类