The translation of client is client. We learn that the client can use its related properties to get the size of the element (including padding and content area, but not the border) or get the size of the border of the element , and these values can be obtained dynamically.
Several basic properties of the client:
- element.clientTop : Get the size of the border on the element
- element.clientLeft : Get the size of the left border of the element
- element.clientWidth : Get the element width (padding + content area, excluding border size)
- element.clientHeight : Get the element height (padding + content area, excluding border size)
(Note that the return value has no unit!!)
一：element.clientTop：
Used to get the size of the border on the element, the return value has no unit
<style>
div{
width: 200px;
height: 200px;
border-top: 10px solid red;
background-color: rgb(255, 215, 105);
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
console.log(div.clientTop);
</script>
</body>
二：element.clientLeft：
Used to get the size of the left border of the element, the return value has no unit
<style>
div{
width: 200px;
height: 200px;
border-left: 10px solid red;
background-color: rgb(255, 215, 105);
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
console.log(div.clientLeft);
</script>
</body>
三： element.clientWidth：
Get the element width (padding + content area, excluding border size), the return value has no unit
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
background-color: rgb(255, 215, 105);
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
console.log(div.clientWidth);
</script>
</body> 
四：element.clientHeight：
Get the element height (padding + content area, excluding border size), the return value has no unit
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
background-color: rgb(255, 215, 105);
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
console.log(div.clientHeight);
</script>
</body>