Question

我有一个能在html中为当前元素加下划线的有效代码，我想在再次按一下click时将其清除

var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    this.parentElement.getElementsByTagName('span')[0].style = "text-decoration:line-through";
    if (this.parentElement.style == 'text-decoration:line-through') {
      this.parentElement.getElementsByTagName('span')[0].style = "text-decoration:none"
    }
  });
}

<!doctype html>
<html>
<body>
  <div id="tasks">
    <div>
      <button>Finish</button>
      <span>Finish web tasks</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Go to gym</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Clean home</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Start project</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Prepare to calculus</span>
    </div>
  </div>

</body>

</html>

Answer 1

只需检查一下textDecoration =='line-through'，如果未将其设置为'line-through'，则将其设置为'none'

getattr

Answer 2

尽管您可以将字符串分配给元素的style属性，但是当您读取该属性时，会得到具有所有样式的对象，因此无法将其与字符串进行比较。

您应该使用.style.textDecoration访问所需的特定样式。

此外，您正在测试父级的样式，而不是跨度。

var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    var span = this.parentElement.querySelector("span");
    if (span.style.textDecoration == "line-through") {
      span.style.textDecoration = "none";
    } else {
      span.style.textDecoration = "line-through";
    }
  });
}

<!doctype html>
<html>

<body>
  <div id="tasks">
    <div>
      <button>Finish</button>
      <span>Finish web tasks</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Go to gym</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Clean home</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Start project</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Prepare to calculus</span>
    </div>
  </div>

</body>

</html>

Answer 3

添加和删除CSS罢工类要好得多。您还可以使用nextElementSibling使代码更简洁。

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', handleClick, false);
}

function handleClick() {
  const el = this.nextElementSibling;
  if (el.classList.contains('strike')) {
    el.classList.remove('strike')
  } else {
    el.classList.add('strike');
  }
}

.strike {
  text-decoration: line-through;
}

<div id="tasks">
  <div>
    <button>Finish</button>
    <span>Finish web tasks</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Go to gym</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Clean home</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Start project</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Prepare to calculus</span>
  </div>
</div>

Answer 4

此JavaScript代码应该可以工作：

11-10

注意if语句中的return语句。这样可以防止在将textDecoration设置为“ none”后立即覆盖换行。

javascript更改父元素样式

4 个答案: