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

上一篇:
下一篇:

评论已关闭!