자바 스크립트에서 숨겨진 요소를 표시하는 방법

Question

내 div가 hidden = "true"로 숨겨져 있습니다. 그러나 작동하고 있습니다. 버튼 클릭 후 표시하고 싶습니다.

Node.js와 함께 작업하며이 부분은 자바 스크립트로 코딩해야합니다.

HTML :

div class="sideDiv" hidden="true"> 

자바 스크립트 :

나는 쇼 그것을 시도()하지만이 작동하지 않습니다.

socket.on('loginInServer',function(data){ 
     $('.sideDiv').show(); 
    }); 

Answer 1

으로 위 말했고을 숨기기 :이전 답변에 추가 hidden

$('.sideDiv').attr('hidden', false); 

$('.sideDiv').prop('hidden', false); 

Answer 2

$('.sideDiv').attr('hidden', false); 

은 그러나 당신은 아마 솔직히 누구나 사용할 보지 못했다 숨겨진 속성 (숨겨진 양식 필드가 아닌)를 사용하지 않는 먼저 그것을 숨길.

.sideDiv{display: none;} 

아니면 게으른 경우에 당신은 HTML의 요소 자체에 포함 할 수 있습니다 : : 페이지 다음

<div class="sideDiv" style="display: none"></div> 

가장 간단한 방법은 CSS에서이 작업을하는 것입니다 jQuery 함수가 dom 요소의 "표시"스타일에서 작동하기 때문에 .show()가 숨겨져 있고 작업을 수행 할 것입니다.

Answer 3

removeAttr() 메서드를 사용하여 특성을 제거하십시오.

ocket.on('loginInServer',function(data){ 
    $('.sideDiv').removeAttr('hidden'); 
}); 

---

또는 attr() 방법을 사용하여 속성을 false로 업데이트합니다.

ocket.on('loginInServer',function(data){ 
    $('.sideDiv').attr('hidden', false); 
}); 

---

또는 prop() 방법을 사용하여 거짓 속성을 설정합니다.

ocket.on('loginInServer',function(data){ 
    $('.sideDiv').prop('hidden', false); 
}); 

참고

---

: 훨씬 더 좋은 방법이 될 것입니다 나중에 당신이 show() 방법을 사용하여 표시 할 수 있습니다 요소 집합 CSS display:none;을 숨기고하십시오.

Answer 4

"display:none" 스타일과 hidden="true" 스타일이 다르게 렌더링됩니다.

hidden

숨겨진 전역 속성

는 요소가 아직 없습니다, 또는 더 이상 관련이 있음을 나타내는 부울 속성입니다. 예를 들어, 로그인 프로세스가 완료 될 때까지 사용할 수없는 페이지의 요소를 숨기는 데 사용할 수 있습니다. 브라우저는 숨겨진 속성 세트가있는 요소를 렌더링하지 않습니다.

jQuery의 show이 요소 style 변경 및 속성 hidden

show

를 변경하지는 ...이 블록 "("표시 ".CSS 호출 대략 동등 ") ...

jQuery의 attr 또는을 사용하려고합니다. 당신은 숨겨진 속성을 제거해야

document.querySelector(".sideDiv").setAttribute("hidden", "false"); 

Answer 5

, 당신은 일반 JS 또한 그것을 할 수있는 속성을 수정하는 방법 요소 대신 CSS를 사용하십시오.

.sideDiv { 
    display: none; 
} 

그러면 jquery의 show() 메소드가 작동합니다.