当复选框被选中时,可以使用JavaScript来添加样式text-decoration: line-through
。具体的实现步骤如下:
document.getElementById()
或者document.querySelector()
等方法来获取到对应的DOM元素。假设复选框的id为checkbox1
,可以使用以下代码获取到该复选框的DOM元素:var checkbox = document.getElementById('checkbox1');
addEventListener()
方法来为复选框添加change
事件的监听器。当复选框的状态发生变化时,监听器中的回调函数将会被触发。代码如下:checkbox.addEventListener('change', function() {
// 在这里添加样式
});
checked
属性来确定复选框的选中状态。如果复选框被选中,就为目标元素添加样式text-decoration: line-through
;如果复选框未被选中,就移除该样式。代码如下:checkbox.addEventListener('change', function() {
var targetElement = document.getElementById('targetElement'); // 替换为实际需要添加样式的目标元素的id或其他选择器
if (checkbox.checked) {
targetElement.style.textDecoration = 'line-through';
} else {
targetElement.style.textDecoration = 'none';
}
});
以上代码中的targetElement
需要替换为实际需要添加样式的目标元素的id或其他选择器。
这样,当复选框被选中时,目标元素就会添加样式text-decoration: line-through
;当复选框未被选中时,目标元素的样式将会恢复为默认值。
领取专属 10元无门槛券
手把手带您无忧上云