接之(二)
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};