В JavaScript Скрыть/показать элемент

вы также можете использовать этот код для отображения / скрытия элементов:

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

Примечание разницу между style.visibility и style.display is при использовании visibility: hidden в отличие от display: none тег не отображается, но для него выделяется место на странице. Тег отображается, его просто не видно на странице.

посмотреть этот ссылке чтобы увидеть различия.

Я хотел бы предложить вам в 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, поэтому кажется, что лучший подход.

вы должны думать 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" для чего-то еще, вам придется жестко закодировать значение того, что было до скрытия. Поэтому, если у вас есть "inline", вам придется сделать $("#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 в Примере.
• после unhiding, он вернется к использованию предыдущего отображаемого значения....иногда. См. p1 в Примере.
• если вы хотите, чтобы захватить все скрытые объекты, вам просто нужно сделать $(".hidden").

плюсы:

• не скрывает, если отображаемое значение было установлено непосредственно на html. См. p2 в Примере.
• не скрывает, если дисплей установлен в javascript с помощью css (). Ссылка на Р3 на примере.
• немного больше кода потому что вы должны определить атрибут CSS.

пример:https://jsfiddle.net/476oha8t/8/

.

изменение дисплея с помощью toggle ()

Javascript:

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

плюсы:

• всегда работает.
• позволяет вам не беспокоиться о том, какое состояние было до переключения. Очевидная польза для это для....выключатель.
• короткое и простой.

плюсы:

• Если вам нужно знать, в какое состояние он переключается, чтобы сделать что-то не связанное напрямую, вам нужно будет добавить больше кода (оператор if), чтобы узнать, в каком состоянии он находится.
• подобно предыдущему con, если вы хотите запустить набор инструкций, содержащий 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/

.

в целом, я бы сказал, что лучше будет Скрыть()/показать() если вам конкретно нужен переключатель. Надеюсь, вы нашли эту информацию полезной.

вы можете использовать скрытое свойство элемента:

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

просто создайте методы 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>