1. top
此属性仅仅在对象的定位(position)属性被设置时可用。否则,此属性设置会被忽略。
< div style ="background-color:red; position:absolute; width:100px; height:100px;" >
< p style ="background-color:silver; position:absolute; top:-5px;" > 测试top </ p >
</ div >
上面是一个段落P包含在一个DIV内,可以看到P的top设置为-5px后,它的上边距超过了容器DIV的上边距,超过的这段距离就是设置的5px。
需要注意的是,DIV和P这一对包含元素,都需要设置position为absolute才能得到想要的结果,假如父元素不设置,则子元素的参照将是更上层定义过position的元素,直到整个文档;
2. posTop
posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而posTop只是一个数值(这一点可以通过
alert("top="+id.style.top)和alert("posTop="+id.style.posTop)来证明),因此一般使用
posTop来进行运算。
< div style ="background-color:red; position:absolute; width:100px; height:100px;" >
< p id ="test" style ="background-color:silver; position:absolute;" > 测试posTop </ p >
</ div >
< script >
test.style.posTop = 15 + 8 ;
alert( " top= " + test.style.top);
alert( " posTop= " + test.style.posTop);
</ script >
无论你使用top或posTop来赋值,最后的结果都是一致的
3. scrollTop
< div id ="container" style ="background-color:silver; width:100px; height:100px; overflow:auto;" >
< p style ="background-color:red;" >
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎 </ p >
</ div >
< script >
container.scrollTop = 12 ;
</ script >
这一段文本在这个100*100的DIV内无法完全显示,所以设置了overflow为auto,它会出现一个上下方向的滑动框,假如没有设置
id.scrollTop属性的话,默认情况下滑块位置在顶端。而设置了scrollTop值为12后,滑块的位置改变了,默认显示是卷过了12个象素的
文本。如果设置overflow为hidden,则将会无法显示顶部12个象素的文本。
注意设置方式是id.scrollTop,而不是id.style.scrollTop。
4. scrollHeight 与 offsetHeight
<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎</p>
</div>
<script>
alert(container.offsetHeight);
alert(container.scrollHeight);
</script>
将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为
250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为
100+150=250。
分享到:
相关推荐
在网页开发中,准确地获取和操作页面元素的位置至关重要,这涉及到多个JavaScript和CSS属性,如`top`、`postop`、`scrollTop`、`offsetTop`、`scrollHeight`、`offsetHeight`和`clientHeight`。这些属性帮助开发者...
本文将深入探讨HTML中的几个重要概念,包括`scrollWidth`、`clientWidth`、`offsetWidth`、`top`、`postop`、`scrollTop`以及`scrollHeight`和`offsetHeight`。 1. `scrollWidth`、`clientWidth`和`offsetWidth` -...
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40; var y = document.body.scrollTop + y - diff; eval("document.all." + layerName + ".style.posTop = y"); eval(...
e.pageY : document.body.scrollTop + event.clientY; flag = 1; } function www_helpor_net() { if (flag == 1 && document.all) { for (var i = message.length - 1; i >= 1; i--) { xpos[i] = xpos[i - 1] ...
hsides: The top and bottom sides only. vsides: The right and left sides only. lhs: The left-hand side only. rhs: The right-hand side only. box: All four sides. border: All four sides. 这些值指明...
if (posTop + ball.offsetHeight >= window.innerHeight || posTop ) { speedY = -speedY; // 反向移动 } ball.style.left = posLeft + speedX + 'px'; ball.style.top = posTop + speedY + 'px'; } ball....
var diff = (document.body.scrollTop + y - document.all[layerName].style.posTop) * 0.40; var newY = document.body.scrollTop + y - diff; document.all[layerName].style.posTop = newY; } function ...
var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop) * 0.40; var newY = document.body.scrollTop + y - diff; eval("document.all." + layerName + ".style.posTop = newY"); eval...
oLayer.style.posTop = document.body.scrollTop + init_pos; oLayer.style.posLeft = document.body.scrollLeft + init_left; }; ``` 这里,`scrollTop` 和 `scrollLeft` 分别表示滚动条在垂直和水平方向上的...
e.pageY : document.body.scrollTop+event.clientY flag=1} function makesnake() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } ...
`div`元素设置了绝对定位,指定了宽度、高度、Z轴顺序以及初始的`left`和`top`属性,使其初始位置符合我们在JavaScript中设置的值。同时,`visibility`被设置为`hidden`,在页面加载完成后通过JavaScript变为可见。 ...
还不是很完善,可以自己加以封装 // JavaScript Document var BoxWidth = 700// ... DataGroup1.style.posTop=-DataFrame3.scrollTop DataGroup2.style.posTop=-DataFrame3.scrollTop } window.onload=WriteTable
var diff = (document.body.scrollTop + y - document.all[layerName].style.posTop) * 0.40; var y = document.body.scrollTop + y - diff; document.all[layerName].style.posTop = y; // 移动广告层 document...
padding-top: 11px; font-size: 12px; color: #800080; text-align: center; cursor: hand; } ``` ### 动态效果与交互处理 通过JavaScript代码实现菜单项的动态效果和交互处理,主要包括: - 使用变量`...
3. **窗体尺寸**:IE通过document.body.offsetWidth和offsetHeight获取尺寸,FF则使用window.innerWidth和innerHeight以及document.documentElement.clientWidth和clientHeight。推荐使用document.body.clientWidth...
- IE使用document.body.offsetWidth和document.body.offsetHeight,FF使用window.innerWidth、window.innerHeight以及document.documentElement.clientWidth和document.documentElement.clientHeight。 - 通用做法...
需要注意的是,这个例子中的旋转速度和半径变化是固定的,可以根据实际需求调整`setTimeout`的间隔时间和r的递增规则。同时,为了兼容更多浏览器,可以使用CSS3的`transform: rotate()`属性来实现更现代、更高效且...
对于窗体的高度和宽度,IE使用`document.body.offsetWidth`和`document.body.offsetHeight`,但FF提供了`window.innerWidth`和`window.innerHeight`,以及`document.documentElement.clientWidth`和`document....
posTop = document.body.scrollTop + event.clientY - y; } } } function stopdrag() { down = false; obj.style.zIndex = z; obj.releaseCapture(); } ``` #### 3. 代码解释 - **init()**: 当`mousedown`...