//使用offset 和 client 两种方式获取到div的高度
时间: 2023-10-23 22:10:47 浏览: 48
好的,以下是使用offset和client两种方式获取div高度的示例代码:
使用offset方式获取div高度:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用offset获取div高度</title>
<style type="text/css">
#myDiv {
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">这是一个div</div>
<script type="text/javascript">
var divHeight = document.getElementById("myDiv").offsetHeight;
console.log("div高度为:" + divHeight);
</script>
</body>
</html>
```
使用client方式获取div高度:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用client获取div高度</title>
<style type="text/css">
#myDiv {
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">这是一个div</div>
<script type="text/javascript">
var divHeight = document.getElementById("myDiv").clientHeight;
console.log("div高度为:" + divHeight);
</script>
</body>
</html>
```
两种方式都可以获取到div的高度,但是使用offset方式获取到的高度包括了div的边框(border)和内边距(padding)的高度,而使用client方式获取到的高度只包括div内容区域的高度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)