首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当复选框被选中时,如何使用JavaScript添加样式text-decoration: line-through?

当复选框被选中时,可以使用JavaScript来添加样式text-decoration: line-through。具体的实现步骤如下:

  1. 首先,需要获取到复选框的DOM元素。可以通过document.getElementById()或者document.querySelector()等方法来获取到对应的DOM元素。假设复选框的id为checkbox1,可以使用以下代码获取到该复选框的DOM元素:
代码语言:txt
复制
var checkbox = document.getElementById('checkbox1');
  1. 接下来,需要为复选框添加一个事件监听器,监听复选框的状态变化。可以使用addEventListener()方法来为复选框添加change事件的监听器。当复选框的状态发生变化时,监听器中的回调函数将会被触发。代码如下:
代码语言:txt
复制
checkbox.addEventListener('change', function() {
  // 在这里添加样式
});
  1. 在回调函数中,可以通过判断复选框的checked属性来确定复选框的选中状态。如果复选框被选中,就为目标元素添加样式text-decoration: line-through;如果复选框未被选中,就移除该样式。代码如下:
代码语言:txt
复制
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;当复选框未被选中时,目标元素的样式将会恢复为默认值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券