原创作品,转载需得到原作者书面许可,同时保留原作者和出处,否则将追究法律责任。
clientTop属性返回元素客户区左上角与整个元素左上角的垂直尺寸。
这段尺寸不包括上内边距和上外边距,那么可以得出,这段尺寸就是上边框的厚度。
此属性与clientLeft属性原理一样,只是获取的尺寸的方位不同。
返回值是一个数字,默认单位是像素。
只读属性,不能赋值。
语法结构:
[JavaScript] 纯文本查看 复制代码element.clientTop
浏览器支持:
(1).IE浏览器支持此属性。
(2).edge浏览器支持此属性。
(3).谷歌浏览器支持此属性。
(4).火狐浏览器支持此属性。
(5).opera浏览器支持此属性。
(6).safria浏览器支持此属性。
代码实例如下:
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> #ant { width:150px; height:50px; border:20px solid blue; border-left:10px solid red; } </style> <script> window.onload=function(){ let odiv = document.getElementById("ant"); let oshow=document.getElementById("show"); oshow.innerHTML = odiv.clientTop; } </script> </head> <body> <div id="show"></div> <div id="ant"></div> </body> </html>
代码运行效果截图如下:
clientTop属性可以返回div的上边框厚度。
看起来与borderTopWidth属性功能是类似的,其实两者还是有区别的。
下面将通过代码实例演示一下两者的区别,代码实例如下:
[HTML] 纯文本查看 复制代码运行代码<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style> #ant { width:150px; height:50px; border:20.5px solid blue; border-left:10px solid red; } </style> <script> window.onload=function(){ let odiv = document.getElementById("ant"); let oshow=document.getElementById("show"); let str="borderTopWidth:"+getComputedStyle(odiv,null).borderTopWidth; str=str+"<br/>clientTop:"+odiv.clientTop; oshow.innerHTML =str; } </script> </head> <body> <div id="show"></div> <div id="ant"></div> </body> </html>
代码运行效果截图如下:
代码分析如下:
(1).首先clientTop属性返回值不带单位(默认单位是像素)。
(2).clientTop属性的返回值是整数,但是通过与CSS对应的属性返回值并不是。
clientTop属性返回值等同于后面计算方式,Math.round(parseFloat(getComputedStyle))。
分解如下:
(1).首先通过getComputedStyle方法获取顶部边框的厚度,返回值是一个带有单位的字符串。
(2).然后通过parseFloat将其转换为浮点数。
(3).最后通过Math.round对浮点数进行四舍五入操作,最终转换为整数。
相关阅读:
(1).Math.round方法一章节。
(2).parseFloat方法一章节。
(3).getComputedStyle方法一章节。
前端教程
HTML5 API
鲁ICP备10022556号-3
鲁公网安备 37021302000666号
关于我们
|手机版|小黑屋|
Copyright © 2012-2020 Design: 蚂蚁部落
最新评论