`

花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight

    博客分类:
  • CSS
 
阅读更多

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。

分享到:
评论

相关推荐

    页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    在网页开发中,准确地获取和操作页面元素的位置至关重要,这涉及到多个JavaScript和CSS属性,如`top`、`postop`、`scrollTop`、`offsetTop`、`scrollHeight`、`offsetHeight`和`clientHeight`。这些属性帮助开发者...

    html学习参考文档

    本文将深入探讨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&#40;"document.all." + layerName + ".style.posTop = y"&#41;; eval&#40;...

    包含 js 日期时间控件

    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 &gt;= 1; i--) { xpos[i] = xpos[i - 1] ...

    JavaScript Table行定位效果

    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. 这些值指明...

    网页上自由运动的小球div,处于页面顶层,鼠标悬浮静止

    if (posTop + ball.offsetHeight &gt;= 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...

    JS简单实现DIV相对于浏览器固定位置不变的方法

    oLayer.style.posTop = document.body.scrollTop + init_pos; oLayer.style.posLeft = document.body.scrollLeft + init_left; }; ``` 这里,`scrollTop` 和 `scrollLeft` 分别表示滚动条在垂直和水平方向上的...

    EASP网站经典网页特效500例鼠标特效跟随鼠标的文字

    e.pageY : document.body.scrollTop+event.clientY flag=1} function makesnake() { if (flag==1 && document.all) { for (i=message.length-1; i&gt;=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } ...

    用javascript实现网页上的浮动广告.doc

    `div`元素设置了绝对定位,指定了宽度、高度、Z轴顺序以及初始的`left`和`top`属性,使其初始位置符合我们在JavaScript中设置的值。同时,`visibility`被设置为`hidden`,在页面加载完成后通过JavaScript变为可见。 ...

    像Excel一样的table表格

    还不是很完善,可以自己加以封装 // JavaScript Document var BoxWidth = 700// ... DataGroup1.style.posTop=-DataFrame3.scrollTop DataGroup2.style.posTop=-DataFrame3.scrollTop } window.onload=WriteTable

    JavaScript实现网页上的浮动广告的简单方法

    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...

    CSS菜单系列

    padding-top: 11px; font-size: 12px; color: #800080; text-align: center; cursor: hand; } ``` ### 动态效果与交互处理 通过JavaScript代码实现菜单项的动态效果和交互处理,主要包括: - 使用变量`...

    HTML在IE浏览器和FF浏览器中标签的使用

    3. **窗体尺寸**:IE通过document.body.offsetWidth和offsetHeight获取尺寸,FF则使用window.innerWidth和innerHeight以及document.documentElement.clientWidth和clientHeight。推荐使用document.body.clientWidth...

    JavaScript兼容浏览器FFIE技巧[定义].pdf

    - IE使用document.body.offsetWidth和document.body.offsetHeight,FF使用window.innerWidth、window.innerHeight以及document.documentElement.clientWidth和document.documentElement.clientHeight。 - 通用做法...

    基于JS代码实现图片在页面中旋转效果

    需要注意的是,这个例子中的旋转速度和半径变化是固定的,可以根据实际需求调整`setTimeout`的间隔时间和r的递增规则。同时,为了兼容更多浏览器,可以使用CSS3的`transform: rotate()`属性来实现更现代、更高效且...

    javascript兼容性解决方法大全

    对于窗体的高度和宽度,IE使用`document.body.offsetWidth`和`document.body.offsetHeight`,但FF提供了`window.innerWidth`和`window.innerHeight`,以及`document.documentElement.clientWidth`和`document....

    js实现层的拖曳,很实用的哦

    posTop = document.body.scrollTop + event.clientY - y; } } } function stopdrag() { down = false; obj.style.zIndex = z; obj.releaseCapture(); } ``` #### 3. 代码解释 - **init()**: 当`mousedown`...

Global site tag (gtag.js) - Google Analytics