在选中复选框时更改排序列表的字体颜色,可以通过以下步骤实现:
下面是一个示例代码:
HTML部分:
<input type="checkbox" id="checkbox" onchange="changeFontColor()" />
<label for="checkbox">选中复选框</label>
<ul id="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
CSS部分:
.highlight {
color: red;
}
JavaScript部分:
function changeFontColor() {
var checkbox = document.getElementById("checkbox");
var list = document.getElementById("list");
if (checkbox.checked) {
list.classList.add("highlight");
} else {
list.classList.remove("highlight");
}
}
在上述代码中,我们首先为复选框添加了一个事件监听器,当复选框的状态改变时,会调用changeFontColor()
函数。该函数通过getElementById()
方法获取了复选框和排序列表的元素,然后根据复选框的选中状态,使用classList
属性来添加或移除CSS类highlight
,从而改变排序列表的字体颜色。
这样,当选中复选框时,排序列表的字体颜色将变为红色,取消选中时,字体颜色将恢复默认。
领取专属 10元无门槛券
手把手带您无忧上云