JavaScript 判断一个div是否在可视区域内 输出完整的html,js代码
时间: 2024-05-14 18:14:56 浏览: 18
以下是一个示例代码,它可以检测一个 div 是否在可视区域内,并根据结果输出完整的 HTML 和 JavaScript 代码。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 判断一个 div 是否在可视区域内</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
margin-top: 2000px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script src="checkDiv.js"></script>
</body>
</html>
```
JavaScript 代码(保存为 checkDiv.js):
```javascript
// 获取要检测的 div 元素
var myDiv = document.getElementById('myDiv');
// 判断元素是否在可视区域内的函数
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// 输出完整的 HTML 和 JavaScript 代码
if (isElementInViewport(myDiv)) {
document.write('<p>该 div 在可视区域内。</p>');
} else {
document.write('<p>该 div 不在可视区域内。</p>');
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)