主页 / 问题 / 1435778
Accepted
Pacemaker
Asked:2022-08-03 20:13:06 +0000 UTC2022-08-03 20:13:06 +0000 UTC

如何在纯js中单击返回块的默认状态？

  • 772

页面上显示了某个段落。我这样做是为了让它的内容在点击时发生变化。以及如何在第二次点击时返回元素的默认状态？好吧，就像有一个隐藏内容的块一样。例如：扰流板。用户可以滚动。或点击打开。并在第二次单击以再次关闭。

firstParagraph.addEventListener('click', function () {
    firstParagraph.innerHTML = 'Это первый абзац!';
    firstParagraph.style.textAlign = 'center';
})
javascript

3 个回答

  1. 如果我们谈论段落，那么一切都很简单，只需将当前文本保存到变量中即可。

    let p_text = p.textContent
let bool = false

p.addEventListener('click', () => {
  p.textContent = bool ? p_text : 'Какой-то другой текст!'
  bool = !bool
})
    <p id="p">Какой-то текст!</p>

    如果我们谈论扰流板，那么您可以通过样式来解决。

    #l {
  background: rgb(19, 19, 19);
  color: transparent;
  border-radius: 5px;
  user-select: none;
  padding: .5rem;
}

#check:checked + #l {
  color: rgb(255, 255, 255);
}
    <input type="checkbox" id="check" style="display: none;">
<label id="l" for="check">Какой-то текст!</label>

    • 0
  2. Best Answer

    似乎是这样的，我们检查状态。

    如果第一个状态- 设置第二个。如果不是，则写第一个状态。

    const firstParagraph = document.getElementById('first');

firstParagraph.addEventListener('click', function() {
  if (firstParagraph.innerHTML === 'Это первый абзац!') {
    firstParagraph.innerHTML = 'Это второй абзац!';
    firstParagraph.style.textAlign = 'left';
  } else {
    firstParagraph.innerHTML = 'Это первый абзац!';
    firstParagraph.style.textAlign = 'center';
  }
})
    #first {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  text-align: center;
}
    <div id="first">
  Это первый абзац!</div>

    • 0

  3. 您可以简单地添加或删除一个类来应用您想要的样式：

    document.querySelector('.paragraph').addEventListener('click', (e) => {
  e.target.classList.toggle('collapsed');
});
    body {
  background-color: #777;
}

.paragraph {
  border: 1px solid black;
  width: 128px;
}

.paragraph.collapsed {
  height: 2px;
  overflow: auto;
}
    <p class="paragraph collapsed">Text 1</p>

    • 0

相关问题