[Javascript] 자바 스크립트 숨기기 / 표시 요소



Answers

이 코드를 사용하여 요소를 표시하거나 숨길 수도 있습니다.

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

참고 style.visibilitystyle.display 의 차이점은 visibility : hidden을 display : none과 달리 사용할 때 태그가 보이지 않지만 페이지에 공간이 할당된다는 것입니다. 태그가 렌더링되고 페이지에 표시되지 않습니다.

차이점을 보려면이 link 를 참조하십시오.

Question

편집 링크를 눌러도 어떻게 숨길 수 있습니까? 또한 편집을 누르면 "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>



다음과 같이 모든 요소에 대해 숨기기 및 표시 메서드를 직접 만들면됩니다.

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()">



테이블에서 사용하는 경우 다음을 사용하십시오.

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



이 질문은 여러 번 해답을 얻었지만 앞으로의 사용자를 위해보다 완전하고 확실한 대답으로 추가 할 것이라고 생각했습니다. 주된 대답은 문제를 해결하지만, 나는 물건을 보여 주거나 숨길 수있는 다양한 방법을 알고 있거나 이해하는 것이 더 나을지도 모른다.

.

css ()를 사용하여 디스플레이 변경하기

이것이 내가이 다른 방법들을 발견 할 때까지 내가 해왔 던 방식입니다.

자바 스크립트 :

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

장점 :

  • 숨 깁니다. 그게 다야.

단점 :

  • 다른 것을 위해 "display"속성을 사용한다면, 숨기기 전에 있던 값을 하드 코딩해야합니다. 그래서 "인라인"이라면 $("#element_to_hid").css("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을 참조하십시오.
  • 숨기기 해제 후 이전 표시 값 ....으로 돌아갑니다. 예제의 p1을 참조하십시오.
  • 숨겨진 모든 객체를 가져 오려면 $(".hidden") 됩니다.

단점 :

  • 표시 값이 HTML에 직접 설정된 경우 숨기지 않습니다. 예제의 p2를 참조하십시오.
  • 디스플레이가 자바 스크립트에서 css ()를 사용하여 설정되면 숨기지 않습니다. 예제의 p3을 참조하십시오.
  • css 속성을 정의해야하기 때문에 코드가 약간 더 있습니다.

예 : https://jsfiddle.net/476oha8t/8/

.

toggle ()을 사용하여 디스플레이 변경하기

자바 스크립트 :

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

장점 :

  • 항상 작동합니다.
  • 전환하기 전에 어떤 상태인지 걱정할 필요가 없습니다. 이것에 대한 명백한 사용은 .... 토글 버튼입니다.
  • 짧고 간단합니다.

단점 :

  • 직접적으로 관련되지 않은 작업을 수행하기 위해 어떤 상태로 전환되는지 알 필요가 있다면 더 많은 코드 (if 문)를 추가하여 해당 상태를 확인해야합니다.
  • 이전의 con와 마찬가지로 숨기기 목적으로 toggle ()을 포함하는 명령어 집합을 실행하려고하지만 이미 숨겨져 있는지 여부를 모르는 경우에는 check (if 문)을 추가해야합니다. 먼저 발견하고 이미 숨겨진 경우 건너 뜁니다. 예제의 p1을 참조하십시오.
  • 앞의 2 가지 단점과 관련하여 특히 숨기거나 특별히 보여주는 무언가에 toggle ()을 사용하면 코드를 읽는 다른 사람들이 전환하는 방법을 모르기 때문에 혼란 스러울 수 있습니다.

예 : https://jsfiddle.net/cxcawkyk/1/

.

hide () / show ()를 사용하여 표시 변경

자바 스크립트 :

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

장점 :

  • 항상 작동합니다.
  • 다시 숨김을 해제하면 이전 표시 값을 사용하여 다시 표시됩니다.
  • 다음과 같이 교환 할 상태를 항상 알 수 있습니다.
    1. 상태가 중요 할 경우 상태를 변경하기 전에 가시성을 확인하기 위해 if 문을 추가 할 필요가 없습니다.
    2. 국가가 중요하다면 전환 할 국가를 코드를 읽는 다른 사람들에게 혼동하지 않습니다.
  • 직관적 인.

단점 :

  • 토글을 모방하려면 먼저 상태를 확인한 다음 다른 상태로 전환해야합니다. 대신 toggle ()을 사용하십시오. 예제의 p2를 참조하십시오.

예 : https://jsfiddle.net/k0ukhmfL/

.

전반적으로, 토글이 특별히 필요한 경우가 아니면 hide () / show ()가 가장 좋습니다. 이 정보가 도움이 되셨기를 바랍니다.




나는 요소를 숨기기 위해 이것을 제안 할 것이다 (다른 사람들이 제안한 것처럼) :

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 inspector에서 원래 상태로 복원되므로보다 나은 접근 방법처럼 보입니다.




Links