网页页面部位 top、postop、scrolltop、offsetTop、scr

2021-01-20 15:01 jianzhan
1.top

此特性仅仅在目标的精准定位(position)特性被设定时能用。不然,此特性设定会被忽视。


拷贝编码
编码以下:

<div style="background-color:red; position:absolute; width:100px; height:100px;">
<p style="background-color:silver; position:absolute; top:⑸px;">检测top</p>
</div>

上面是1个段落P包括在1个DIV内,能够看到P的top设定为⑸px后,它的上边距超出了器皿DIV的上边距,超出的这段间距便是设定的5px。

必须留意的是,DIV和P这1对包括元素,都必须设定position为absolute才可以获得要想的結果,倘若父元素不设定,则子元素的参考将是更顶层界定过position的元素,直至全部文本文档;

2.posTop

posTop的标值实际上和top是1样的,但差别在于,top固定不动了元素企业为px,而posTop只是1个标值,1般应用posTop来开展运算。

3.scrollTop


拷贝编码
编码以下:

<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red;" mce_style="background-color:red;">
这里是文字
</p>
</div>
<script type="text/javascript"><!--
container.scrollTop = 12;
// --></script>

这1段文字在这个100*100的DIV内没法彻底显示信息,因此设定了overflow为auto,它会出現1个左右方位的拖动框,倘若沒有设定 id.scrollTop特性的话,默认设置状况下滑块部位在顶端。而设定了scrollTop值为12后,滑块的部位更改了,默认设置显示信息是卷过了12个象素的文字。假如设定overflow为hidden,则可能没法显示信息顶部12个象素的文字。

留意设定方法是id.scrollTop,而并不是id.style.scrollTop。

4.offsetTop

假如元素 A 是 HTML 的 body 元素,其 display 特性测算值是 none,或不具备 CSS 合理布局盒子,则回到 0,并终止本优化算法。

假如元素 A 的 offsetParent 是 null 或是 HTML 的 body 元素,以 CSS 像素为企业回到元素 A 上边框距画布原点的竖直间距,并终止本优化算法。

以 CSS 像素为企业回到元素 A 上边框距其 offsetParent 上边框的间距。
 
5. scrollHeight 与 offsetHeight与clientHeight

针对document.body

clientHeight
大伙儿对 clientHeight 都沒有甚么质疑,都觉得是內容可视性地区的高宽比,也便是说网页页面访问器中能够看到內容的这个地区的高宽比,1般是最终1个专用工具条下列到情况栏以上的这个地区,与网页页面內容不相干。

offsetHeight
IE、Opera 觉得 offsetHeight = clientHeight + 翻转条 + 边框。
NS、FF 觉得 offsetHeight 是网页页面內容具体高宽比,能够小于 clientHeight。

scrollHeight
IE、Opera 觉得 scrollHeight 是网页页面內容具体高宽比,能够小于 clientHeight。
NS、FF 觉得 scrollHeight 是网页页面內容高宽比,但是最少值是 clientHeight

对某个HTML控制

offsetHeight是本身元素的高宽比,scrollHeight是 本身元素的高宽比+掩藏元素的高宽比。


拷贝编码
编码以下:

<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
别再做情人 做只猫 做只狗 不做情人 做只宠物最少讨人喜欢美丽动人 和你交叉不浅不必明天会被你憎</p>
</div>
<script type="text/javascript"><!--
alert(container.offsetHeight);
alert(container.scrollHeight);
// --></script>

将先后輸出100,250。由于早已特定了元素的height为100px,因此offsetHeight自始至终为100px;內部元素为250px,而器皿元素仅有100px,那末也有150px的內容它没法显示信息出来,但它确是具体存在的,因此scrollHeight值为100+150=250。