日度归档:2020年3月28日

JavaScript clientTop属性值简介说明


摘要:
下文讲述dom对象之clientTop属性值的功能简介说明,如下所示:


DOM之clientTop属性值说明


DOM之clientTop属性值功能说明:
clientTop属性值用于返回一个DOM元素的上边框的高度(即border-top的值)
DOM之clientTop属性值注意事项:
1.此属性是一个只读属性
2.clientTop信息返回值是一个数值,无任何单位(缺省单位为像素)
3.当一个dom元素中其css display中属性值为none,则clientTop返回值为0
4.clientTop返回值会自动进行四舍五入取整,如实际值是380.5,则返回值381

DOM之clientTop属性值语法:
DOM.clientTop

DOM之clientTop属性值举例说明

 <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---clientTop属性值的举例分享
</title>
<style >
#container{
  width:120px;
  height:50px;
  line-height:50px;
  border :12px solid gray;
  padding-left:7px;
  padding-right:6px;
  text-align :center;
  font-size:12px;
  color:white;font-weight:bold;
  background-color:blue;
}
</style>
<script>
window.onload =function() {
  let oDiv=document.getElementById("container");
  oDiv.innerHTML=oDiv.clientTop;
}
</script>
</head>
<body>
<p>maomao365.com <br />
clientTop = border-top;
<br />
</p>
  <div id="container"></div>
</body>
</html>
DOM对象之clientTop属性举例说明

DOM对象之clientTop属性举例说明

JavaScript clientLeft属性值简介说明


摘要:
下文讲述dom对象之clientLeft属性值的功能简介说明,如下所示:


DOM之clientLeft属性值说明


DOM之clientLeft属性值功能说明:
clientLeft属性值用于返回一个DOM元素的左边框的宽度(即border-left的宽度)
DOM之clientLeft属性值注意事项:
1.此属性是一个只读属性
2.clientLeft信息返回值是一个数值,无任何单位(缺省单位为像素)
3.当一个dom元素中其css display中属性值为none,则clientLeft返回值为0
4.clientLeft返回值会自动进行四舍五入取整,如实际值是380.5,则返回值381

DOM之clientLeft属性值语法:
DOM.clientLeft

DOM之clientLeft属性值举例说明

 <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---clientLeft属性值的举例分享
</title>
<style >
#container{
  width:120px;
  height:50px;
  line-height:50px;
  border :8px solid gray;
  padding-left:7px;
  padding-right:6px;
  text-align :center;
  font-size:12px;
  color:white;font-weight:bold;
  background-color:blue;
}
</style>
<script>
window.onload =function() {
  let oDiv=document.getElementById("container");
  oDiv.innerHTML=oDiv.clientLeft;
}
</script>
</head>
<body>
<p>maomao365.com <br />
clientLeft = border-left;
<br />
</p>
  <div id="container"></div>
</body>
</html>
获取DOM元素的Border-left属性值的方法分享

获取DOM元素的Border-left属性值的方法分享

JavaScript clientWidth属性值简介说明


摘要:
下文讲述dom对象之clientWidth属性值的功能简介说明,如下所示:


DOM之clientWidth属性值说明


DOM之clientWidth属性值功能说明:
clientWidth属性值用于返回一个DOM元素的高度信息
(此宽度信息包含DOM元素的宽度和左右内边距Padding的宽度,但不包含外边距宽度,不包含垂直滚动条所占用的宽度,不包含边框宽度)
DOM之clientWidth属性值注意事项:
1.此属性是一个只读属性
2.clientWidth信息返回值是一个数值,无任何单位(缺省单位为像素)
3.当一个dom元素中其css display中属性值为none,则clientWidth返回值为0
4.clientWidth返回值会自动进行四舍五入取整,如实际值是380.5,则返回值381

DOM之clientWidth属性值语法:
DOM.clientWidth

DOM之clientWidth属性值举例说明

 <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---clientWidth属性值的计算方法分享
</title>
<style >
#container{
  width:120px;
  height:50px;
  line-height:50px;
  border :8px solid gray;
  padding-left:7px;
  padding-right:6px;
  text-align :center;
  font-size:12px;
  color:white;font-weight:bold;
  background-color:blue;
}
</style>
<script>
window.onload =function() {
  let oDiv=document.getElementById("container");
  oDiv.innerHTML=oDiv.clientWidth;
}
</script>
</head>
<body>
<p>maomao365.com <br />
clientWidth = width+<br />padding-left+padding-right;
<br />
120+7+6 =133
</p>
  <div id="container"></div>
</body>
</html>
DOM对象之clientWidth属性举例说明

DOM对象之clientWidth属性举例说明