JavaScript 隐藏/显示元素

javascript

2022-08-29 23:40:37

按下“编辑”链接后如何隐藏它？以及当我按编辑时，我可以隐藏“lorem ipsum”文本吗？

<script type="text/javascript">
function showStuff(id) {
  document.getElementById(id).style.display = 'block';
}
</script>


<td class="post">

  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span id="answer1" style="display: none;">
    <textarea rows="10" cols="115"></textarea>
  </span>

  Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
</td>

答案 1

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

答案 2

您还可以使用此代码来显示/隐藏元素：

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

注意和之间的区别是当使用 visibility：hidden 不像 display：none，标记是不可见的，但是在页面上为其分配了空间。标记已呈现，只是在页面上看不到它。style.visibilitystyle.display

请参阅此链接以查看差异。