用javascript实现,用事件监听器实现更换文本颜色 添加、删除列表的内容,
时间: 2024-02-18 20:02:46 浏览: 131
好的,我可以帮您解答。以下是使用 JavaScript 实现更换文本颜色,添加、删除列表内容的示例代码:
更换文本颜色:
HTML 代码:
```
<p>这是一段文字</p>
<button id="changeColorBtn">更换颜色</button>
```
JavaScript 代码:
```
var btn = document.getElementById('changeColorBtn');
var p = document.getElementsByTagName('p')[0];
btn.addEventListener('click', function() {
p.style.color = 'red'; // 更换颜色
});
```
添加、删除列表内容:
HTML 代码:
```
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<button id="addBtn">添加</button>
<button id="deleteBtn">删除</button>
```
JavaScript 代码:
```
var addBtn = document.getElementById('addBtn');
var deleteBtn = document.getElementById('deleteBtn');
var list = document.getElementById('list');
addBtn.addEventListener('click', function() {
var newItem = document.createElement('li');
newItem.innerText = '新增列表项';
list.appendChild(newItem); // 添加新项
});
deleteBtn.addEventListener('click', function() {
var lastItem = list.lastChild;
if (lastItem) {
list.removeChild(lastItem); // 删除最后一项
}
});
```
以上代码仅供参考,具体实现方式根据需求略有不同。
阅读全文