의 반대는 visibility: hidden입니다 visibility: visible. 마찬가지로, 반대되는 것이 display: none있습니까?
많은 사람들이 속성 display: none을 사용하는 것만 큼 명확하지 않기 때문에 요소가있을 때 요소를 표시하는 방법을 알아내는 데 혼란을 겪 습니다 visibility.
나는 visibility: hidden대신 대신 사용할 수 는 display: none있지만 같은 효과를주지 않으므로 그렇게하지 않을 것입니다.
답변
display: none문자 그대로 반대의 문자가 없습니다 visibility:hidden.
이 visibility속성은 요소의 표시 여부를 결정합니다. 따라서 서로 반대되는 두 가지 상태 ( visible및 hidden)가 있습니다.
display속성은, 그러나, 레이아웃 규칙이 요소가 따를 것을 결정한다. 요소는 CSS에서 자신을 배치하는 방법에 대한 규칙의 여러 가지 종류가 있습니다, 그래서 여러 가지 다른 값이 있습니다 ( block, inline, inline-block등 – 이 값 여기에 대한 설명서를 참조하십시오 ).
display:none 마치 페이지 레이아웃이없는 것처럼 페이지 레이아웃에서 요소를 완전히 제거합니다.
에 대한 다른 모든 값 display은 요소가 페이지의 일부가되게하므로 어떤 의미에서는 모두 반대 display:none입니다.
그러나 display:none“대머리”와 반대되는 헤어 스타일이 하나도없는 것처럼 직접적으로 반대되는 가치는 없습니다 .
답변
display: none거기에 대한 진정한 반대 는 (아직) 없습니다.
그러나 display: unset매우 가깝고 대부분의 경우 작동합니다.
에서 MDN (모질라 개발자 네트워크) :
설정되지 않은 CSS 키워드는 초기 키워드와 상속 키워드의 조합입니다. 이 두 개의 CSS 전체 키워드와 마찬가지로 CSS 속기 모두를 포함하여 모든 CSS 속성에 적용 할 수 있습니다. 이 키워드는 속성을 상위 속성에서 상속하는 경우 상속 된 값으로 재설정하거나 그렇지 않은 경우 초기 값으로 재설정합니다. 다시 말해, 첫 번째 경우 inherit 키워드처럼 작동하고 두 번째 경우에는 초기 키워드처럼 작동합니다.
또한 display: revert현재 개발 중입니다. 자세한 내용은 MDN 을 참조하십시오.
답변
displayJavascript에서 요소를 변경할 때 많은 경우 결과를 ‘실행 취소’하는 적절한 옵션은 element.style.display = "none"입니다 element.style.display = "". 속성 의 display선언을 제거하고 style속성의 실제 값을 display문서의 스타일 시트에 설정된 값으로 되돌 립니다 (다른 곳에서 재정의하지 않으면 브라우저 기본값으로). 그러나보다 안정적인 접근 방식은 CSS 클래스를
.invisible { display: none; }이 클래스 이름을 추가하거나 제거합니다 element.className.
답변
당신이 사용할 수있는
display: normal;그것은 정상적으로 작동합니다 …. CSS의 작은 해킹입니다.)
답변
나는 그것을 위해
display:block;
작동
답변
Paul과 같이 표시와 반대되는 문자는 없다고 설명합니다. HTML마다 요소마다 기본 표시가 다르므로 클래스 나 인라인 스타일 등으로 표시를 변경할 수 없습니다.
그러나 jQuery와 같은 것을 사용하면 show 및 hide 함수는 표시와 반대되는 것처럼 작동합니다. 요소를 숨기고 다시 표시하면 요소가 숨겨지기 전과 동일한 방식으로 표시됩니다. 그들은 요소를 숨길 때 display 속성의 오래된 값을 저장하여 다시 표시 할 때 숨기 전에했던 것과 같은 방식으로 표시합니다.
https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180
즉, 인라인 또는 인라인 블록을 표시하도록 div를 설정하고 숨기고 다시 표시하면 이전과 동일하게 인라인 또는 인라인 블록으로 다시 표시됩니다.
<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>스크립트:
$('a').click(function(){
$('div').toggle();
});div의 표시 속성은 숨겨지고 (표시 : 없음) 다시 표시 되어도 일정하게 유지됩니다.
답변
인쇄용 스타일 시트의 경우 다음을 사용합니다.
/* screen style */
.print_only { display: none; }
/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }값이 포함 된 양식을 인쇄해야하는데 입력 필드를 인쇄하기 어려웠을 때 이것을 사용했습니다. 그래서 span.print_only 태그 (div.print_only가 다른 곳에서 사용됨)에 싸인 값을 추가 한 다음 .no_print 클래스를 입력 필드에 적용했습니다. 따라서 화면에 입력 필드가 표시되고 인쇄시 값만 표시됩니다. 화려하고 싶다면 JS를 사용하여 필드가 업데이트되었을 때 span 태그의 값을 업데이트 할 수 있지만 필자의 경우에는 필요하지 않았습니다. 아마도 가장 우아한 해결책은 아니지만 그것은 나를 위해 일했습니다!
