html制作一个页面,页面上有四个独立的块,当用户用鼠标在某一模块上点击时,将显示该鼠标所在位置对象的标记名和ID。
时间: 2024-03-03 07:49:09 浏览: 23
好的,以下是一个简单的 HTML 页面示例,包含四个独立的块。每个块都有一个不同的标记名和 ID。当用户点击某个块时,页面会在下方的文本框中显示该块的标记名和 ID。
```html
<!DOCTYPE html>
<html>
<head>
<title>点击显示标记名和ID</title>
<style>
.block {
width: 100px;
height: 100px;
background-color: gray;
margin: 10px;
float: left;
text-align: center;
line-height: 100px;
font-size: 24px;
cursor: pointer;
}
</style>
<script>
window.onload = function() {
var blocks = document.getElementsByClassName('block');
for (var i = 0; i < blocks.length; i++) {
blocks[i].onclick = function() {
var tagName = this.tagName.toLowerCase();
var id = this.id;
document.getElementById('result').value = '标记名:' + tagName + ',ID:' + id;
}
}
}
</script>
</head>
<body>
<div class="block" id="block1">块1</div>
<div class="block" id="block2">块2</div>
<div class="block" id="block3">块3</div>
<div class="block" id="block4">块4</div>
<br>
<br>
<textarea id="result" rows="3" cols="50" readonly></textarea>
</body>
</html>
```
在上面的示例中,我们使用了 CSS 样式来定义块的外观,使用了 JavaScript 来实现点击事件的处理。当用户点击某个块时,JavaScript 中的 onclick 事件会触发,并且将该块的标记名和 ID 显示在下方的文本框中。
相关推荐
![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)