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


Answers

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

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

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

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

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>



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

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




요소의 숨겨진 속성을 사용할 수 있습니다.

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



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

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>