显示div中的属性并且能修改
时间: 2024-03-14 18:45:03 浏览: 19
您可以使用 JavaScript 来实现在页面中显示 div 元素中的属性并且能够修改。以下是一个简单的示例代码:
HTML 代码:
```html
<div id="myDiv" data-name="John" data-age="30">Hello World!</div>
<button onclick="showAttributes()">显示属性</button>
```
JavaScript 代码:
```javascript
function showAttributes() {
var div = document.getElementById("myDiv");
var name = div.getAttribute("data-name");
var age = div.getAttribute("data-age");
alert("名称:" + name + ",年龄:" + age);
var newName = prompt("请输入新的名称:", name);
var newAge = prompt("请输入新的年龄:", age);
div.setAttribute("data-name", newName);
div.setAttribute("data-age", newAge);
alert("新的名称:" + newName + ",新的年龄:" + newAge);
}
```
在上述代码中,我们使用 `getAttribute()` 方法来获取 div 元素中 `data-name` 和 `data-age` 属性的值,并使用 `setAttribute()` 方法来修改这些属性的值。当用户点击按钮时,会弹出对话框显示当前属性的值,并要求用户输入新的属性值。用户输入后,代码会更新属性并弹出另一个对话框显示新的属性值。
相关推荐
![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)