1. (应用题) 在网页上制作一个ul无序列表、一个段落和一个按钮,单击按钮将列表中奇数项li的背景色设置为红色,偶数项的li的背景色设置为绿色,并将段落中的文字设置为加粗的“你单击了按钮!”运行结果如下图:
时间: 2024-05-02 12:18:01 浏览: 88
```html
<!DOCTYPE html>
<html>
<head>
<title>列表背景色设置</title>
<style>
li {
padding: 5px;
margin: 5px;
color: white;
font-size: 20px;
font-weight: bold;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<p>你单击了按钮!</p>
<button onclick="changeColor()">改变颜色</button>
<script>
function changeColor() {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
if (i % 2 == 0) {
lis[i].classList.add("green");
lis[i].classList.remove("red");
} else {
lis[i].classList.add("red");
lis[i].classList.remove("green");
}
}
document.getElementsByTagName("p")[0].style.fontWeight = "bold";
document.getElementsByTagName("p")[0].textContent = "你单击了按钮!";
}
</script>
</body>
</html>
```
阅读全文