JavaScript隐藏/显示元素

2020/10/05 00:41 · javascript ·  · 0评论

按下后如何隐藏“编辑”链接？当我按下编辑键时，是否还可以隐藏“ 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>


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>

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

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

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

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

我想建议您使用JQuery选项。

$("#item").toggle();
$("#item").hide();
$("#item").show();

例如：

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

我建议这样做以隐藏元素（如其他人所建议的那样）：

document.getElementById(id).style.display = 'none';

但是为了使元素可见，我建议这样做（而不是display ='block'）：

document.getElementById(id).style.display = '';

原因是在我正在处理的页面上，使用display ='block'会导致在IE（11）和Chrome（版本43.0.2357.130 m）中都可见的元素旁边出现额外的空白/空白。

当您首次在Chrome中加载页面时，没有样式属性的元素将在DOM检查器中显示为：

element.style {
}

如预期的那样，使用标准JavaScript对其进行隐藏：

element.style {
  display: none;
}

使用display ='block'使它再次可见将其更改为：

element.style {
  display: block;
}

这与原来不同。在大多数情况下，这可能不会有任何区别。但是在某些情况下，确实会引入异常。

使用display =''确实可以将它恢复到DOM检查器中的原始状态，因此这似乎是更好的方法。

您可以使用element的隐藏属性：

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

您应该尽可能地将JS用作行为，将CSS用作可视化糖果。通过稍微更改HTML：

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

您只需使用CSS规则即可从一个视图切换到另一个视图：

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

以及在两个类之间切换的JS代码

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

尽管这个问题已经被回答过很多次了，但我想我会为将来的用户提供更完整，更可靠的答案。主要答案确实可以解决问题，但我相信最好是了解/理解显示/隐藏事物的各种方式。

。

使用css（）更改显示

在找到其他一些方法之前，这就是我以前使用的方法。

Javascript：

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

优点：

  • 隐藏和隐藏。就是这样

缺点：

  • 如果将“ display”属性用于其他内容，则必须对隐藏之前的值进行硬编码。因此，如果您具有“内联”功能，则必须这样做，$("#element_to_hid").css("display", "inline");否则它将默认恢复为“阻止”或任何其他强制执行的功能。
  • 容易造成错字。

示例：https： //jsfiddle.net/4chd6e5r/1/

。

使用addClass（）/ removeClass（）更改显示

在为该示例设置示例时，我实际上在此方法上遇到了一些缺陷，使其非常不可靠。

CSS / Javascript：

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

优点：

  • 隐藏....有时。请参考示例中的p1。
  • 取消隐藏后，有时会返回到使用以前的显示值。请参考示例中的p1。
  • 如果要抓取所有隐藏的对象，只需要做$(".hidden")。

缺点：

  • 如果显示值是直接在html上设置的，则不会隐藏。请参考示例中的p2。
  • 如果显示是使用css（）在javascript中设置的，则不会隐藏。请参考示例中的p3。
  • 因为您必须定义css属性，所以代码略多。

示例：https：//jsfiddle.net/476oha8t/8/

。

使用toggle（）更改显示

Javascript：

$("element_to_hide").toggle();  // To hide and to unhide

优点：

  • 一直有效。
  • 使您不必担心切换之前的状态。明显的用途是用于.... toggle按钮。
  • 简短而简单。

缺点：

  • 如果您需要知道要切换到哪个状态以执行不直接相关的操作，则必须添加更多代码（if语句）以找出它处于哪个状态。
  • 与前一个骗局类似，如果您要运行一组包含toggle（）的指令以进行隐藏，但是不知道该指令是否已被隐藏，则必须添加一个检查（if语句）首先找出它是否已经隐藏，然后跳过。请参考示例的p1。
  • 与前面的2个缺点有关，对于特定的隐藏或特定显示内容使用toggle（），可能会使其他人在阅读您的代码时感到困惑，因为他们不知道他们将以哪种方式进行切换。

示例：https：//jsfiddle.net/cxcawkyk/1/

。

使用hide（）/ show（）更改显示

Javascript：

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

优点：

  • 一直有效。
  • 取消隐藏后，它将返回到使用先前的显示值。
  • 您将始终知道要切换到哪个状态，因此：

    1. 如果状态很重要，则无需在更改状态之前添加if语句来检查可见性。
    2. 如果状态很重要，则不会混淆其他人阅读您的代码时所切换到的状态。
  • 直观。

缺点：

  • 如果要模仿切换，则必须先检查状态，然后再切换到其他状态。这些可以使用toggle（）代替。请参考示例的p2。

示例：https：//jsfiddle.net/k0ukhmfL/

。

总的来说，除非您特别需要将它用作切换，否则我最好说是hide（）/ show（）。我希望您发现此信息对您有所帮助。

只需为所有元素自己创建隐藏和显示方法，如下所示

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

之后，您可以将这些方法与通常的元素标识符一起使用，如以下示例所示：

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

要么：

<img src="removeME.png" onclick="this.hide()">

我推荐Javascript，因为它相对较快且更具延展性。

    <script>
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';
}
</script>


<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>

如果您在表中使用它，请使用以下命令：-

  <script type="text/javascript">
   function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'table-row';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
</script>


<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>

Vanilla JS用于类和ID

按编号

document.querySelector('#element-id').style.display = 'none';

按类别（单个元素）

document.querySelector('.element-class-name').style.display = 'none';

按类别（多个元素）

for (let elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}
本文地址：http://javascript.askforanswer.com/javascriptyincang-xianshiyuansu.html
文章标签：
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载

老薛主机终身7折优惠码boke112

上一篇：
下一篇：

评论已关闭！