표시와 반대되는 것이 있습니까?

197

의 반대는 visibility: hidden입니다 visibility: visible. 마찬가지로, 반대되는 것이 display: none있습니까?

많은 사람들이 속성 display: none을 사용하는 것만 큼 명확하지 않기 때문에 요소가있을 때 요소를 표시하는 방법을 알아내는 데 혼란을 겪 습니다 visibility.

나는 visibility: hidden대신 대신 사용할 수 는 display: none있지만 같은 효과를주지 않으므로 그렇게하지 않을 것입니다.

css

35

이것이 다운 투표를 받고 요청을 마감하는 이유를 잘 모르겠습니다. 주제에 대해 (현재 스택 오버플로에 143,368 개의 CSS 질문이 있음) 실제 문제이며 사람들이 언어를 올바르게 배우는 데 도움이되는 좋은 질문입니다.

— Paul D. Waite

4

@ 폴 어쩌면 사람을 didnt 통지는 자기의 대답을했고 (연구 노력이이 질문에 모든 때문에)이 낮은 연구 노력 알았는데

— 리처드 설렘

11

귀하의 답변이 w3schools.com/cssref/pr_class_display.asp 에서 테이블을 복사 / 붙여 넣는 것이라면 질문을하는 것이 왜 귀찮 습니까?

— 도마뱀 빌

1

@RichardTingle : 아, 좋은 지적입니다. @MohammadAreebSiddiq : 아, 귀하의 답변을 삭제해야한다고 생각하지 않았습니다. 가능한 모든 display값 의 큰 목록을 제거하면 좋을 것입니다. (그리고 그것은 물론 제 의견 일 것입니다. 사람들은 그 목록에있는 것을 정말로 좋아했을 것입니다.)

— Paul D. Waite

당신은 정말로 정말로 정말로 Ilya Streltsyn의 대답을 받아 들인 것입니다. Ilya는 디스플레이의 "버전"을 제공합니다. 그 반대는 없습니다. 질문의 실제 문제를 해결하는 반면, 귀하가 수락하기로 선택한 답변은 본질적으로 "아니오"라고 말합니다. 어느 것이 사실이지만, 훨씬 덜 도움이됩니다. 이것은 언어학자가 아닌 프로그래머를위한 것입니다.

— mathheadinclouds

178

display: none문자 그대로 반대의 문자가 없습니다 visibility:hidden.

이 visibility속성은 요소의 표시 여부를 결정합니다. 따라서 서로 반대되는 두 가지 상태 ( visible및 hidden)가 있습니다.

display속성은, 그러나, 레이아웃 규칙이 요소가 따를 것을 결정한다. 요소는 CSS에서 자신을 배치하는 방법에 대한 규칙의 여러 가지 종류가 있습니다, 그래서 여러 가지 다른 값이 있습니다 ( block, inline, inline-block등 - 이 값 여기에 대한 설명서를 참조하십시오 ).

display:none 마치 페이지 레이아웃이없는 것처럼 페이지 레이아웃에서 요소를 완전히 제거합니다.

에 대한 다른 모든 값 display은 요소가 페이지의 일부가되게하므로 어떤 의미에서는 모두 반대 display:none입니다.

그러나 display:none"대머리"와 반대되는 헤어 스타일이 하나도없는 것처럼 직접적으로 반대되는 가치는 없습니다 .

— 폴 디 웨이트
소스

2

display: initialCSS2.1을 구현하는 브라우저의 삭제 된 자체 답변에서 언급 한 것과 동의합니다 display: inline. display주어진 요소에 대해 브라우저 기본값으로 재설정되지 않습니다 . "초기 값"의 의미가 아닙니다.

— BoltClock

26

'대머리'예에 대한 나의 투표 :) 이해하기 쉬운 예!

— Jesper Rønn-Jensen

1

내가 읽은 전체는 내 자신의 생각입니다. "훌륭한 예, 그렇습니다. 그들은 모두 반대입니다. display:none" " 대머리 와 반대되는 헤어 스타일이 하나도없는 것처럼 " "와우 플러스 1, 멋지게 넣습니다."

— Chef_Code

2

모든 헤어 스타일은 대머리와 반대입니다.

— AdjunctProfessorFalcon

@AdjunctProfessorFalcon : 글쎄요. 1 번으로 면도 한 머리는 숭어보다 대머리와는 정반대라고 할 수 있습니다.

— Paul D. Waite

84

display: none거기에 대한 진정한 반대 는 (아직) 없습니다.

그러나 display: unset매우 가깝고 대부분의 경우 작동합니다.

에서 MDN (모질라 개발자 네트워크) :

설정되지 않은 CSS 키워드는 초기 키워드와 상속 키워드의 조합입니다. 이 두 개의 CSS 전체 키워드와 마찬가지로 CSS 속기 모두를 포함하여 모든 CSS 속성에 적용 할 수 있습니다. 이 키워드는 속성을 상위 속성에서 상속하는 경우 상속 된 값으로 재설정하거나 그렇지 않은 경우 초기 값으로 재설정합니다. 다시 말해, 첫 번째 경우 inherit 키워드처럼 작동하고 두 번째 경우에는 초기 키워드처럼 작동합니다.

(출처 : https://developer.mozilla.org/docs/Web/CSS/unset )

또한 display: revert현재 개발 중입니다. 자세한 내용은 MDN 을 참조하십시오.

— RockPaperLizard
소스

무엇에 대해 display: initial?

— Flimm

31

displayJavascript에서 요소를 변경할 때 많은 경우 결과를 '실행 취소'하는 적절한 옵션은 element.style.display = "none"입니다 element.style.display = "". 속성 의 display선언을 제거하고 style속성의 실제 값을 display문서의 스타일 시트에 설정된 값으로 되돌 립니다 (다른 곳에서 재정의하지 않으면 브라우저 기본값으로). 그러나보다 안정적인 접근 방식은 CSS 클래스를

.invisible { display: none; }

이 클래스 이름을 추가하거나 제거합니다 element.className.

— 일리아 스트 렐 트신
소스

2

.element { display: none }(예를 들어 CSS lib에 정의 된) 재정의하려는 경우 .element { display: '' !important }작동하지 않습니다. 당신은 사용이.element { display: unset !important }

— tanguy_k

2

display:noneJavaScript에서만 "실행 취소" 에 대해 이야기했습니다 . 물론 빈 문자열은 잘못된 값이므로 CSS에서 작동하지 않습니다. Hovewer는, display: unset당신은 예를 들어, 기본 복원되지 않습니다 제안 display:blockA에 대한 <div>또는 기본 display:table-rowA에 대한이 <tr>, 효과적으로에 모든 회전 display:inline(단지 등 display:initial). 요소의 브라우저 기본값을 복원하려면이 display:revert있지만 제대로 지원되지는 않습니다 ( caniuse.com/#feat=css-revert-value ).

— Ilya Streltsyn

이것이 정답입니다. 받아 들여진 대답은 '대머리의 반대'와 잘 비교되지만, 가난한 프로그래머가 "대머리 만들기"- "지금, 머리를 뒤로 젖히십시오"구현을 처리하는 데 도움이되지 않습니다. 이 답변은 실제 문제를 해결하는 방법을 알려줍니다. "old hair"는 기본 디스플레이가 아니라 'block'또는 'table cell'등이 될 수 있기 때문에 Element.style.display = ''는 오류가 발생하기 쉽습니다. 여기에서 볼 수 있듯이 ".invisible"클래스를 제거하는 것은 "지금 머리를 다시 넣는"버그가없는 유일한 구현입니다. 따라서 항상 이렇게하십시오

— mathheadinclouds

6

당신이 사용할 수있는

display: normal;

그것은 정상적으로 작동합니다 .... CSS의 작은 해킹입니다.)

— 인데 라
소스

2

왜 이것이 다운 보팅되고 있습니까? 이것이 나쁜 방법입니까? tablerows에는 잘 작동하지만 다른 것을 사용해야합니까?

— Benjamin Karlog

4

'normal'값은 display속성에 유효한 값이 아니므로 무시되고 효과적으로 element.style.display = ''할당 처럼 작동 합니다 ( 위의 답변 참조).

— Ilya Streltsyn

27

다시 말해 display: chunk norris;, 약간의 킥으로 같은 효과 를 낼 수있었습니다 .

— 케빈 B

1

.element { display: none }(예를 들어 CSS lib에 정의 된) 재정의하려는 경우 .element { display: normal !important }작동하지 않습니다. 당신은 사용이.element { display: unset !important }

— tanguy_k

4

나는 그것을 위해 display:block; 작동

— 프라 딥 베 헤라
소스

이는로 표시하려는 요소에만 유용하며 block, inline예 <span>를 들어 같은 요소 에는 일반적으로 원하는 것이 아닙니다 .

— Flimm

3

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의 표시 속성은 숨겨지고 (표시 : 없음) 다시 표시 되어도 일정하게 유지됩니다.

— 사용자 3589536
소스

1

"display : table-cell"이 내가 필요한 것입니다. 다른 답변에는 언급되지 않았습니다.

— bendecko

1

인쇄용 스타일 시트의 경우 다음을 사용합니다.

/* 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 태그의 값을 업데이트 할 수 있지만 필자의 경우에는 필요하지 않았습니다. 아마도 가장 우아한 해결책은 아니지만 그것은 나를 위해 일했습니다!

— TonyP
소스

1

display : block을 사용할 수 있습니다

예 :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>

— 아디에야 쿨 카르 니
소스

0

특정 사용자에게는 숨겨져 있고 다른 사용자에게는 숨겨져있는 테이블을 원했던 앱을 만들 때이 문제가 발생했습니다.

처음에는 display : none으로 설정 한 다음 표시하려는 사용자를 위해 display : inline-block으로 설정했지만 예상 할 수있는 형식 문제 (열 통합 또는 일반적으로 혼란스러운)가 발생했습니다.

내가 해결 한 방법은 먼저 테이블을 표시하고 싶지 않은 사용자를 위해 "display : none"을 수행하는 것이 었습니다. 이런 식으로 정상적으로 포맷되었지만 필요에 따라 사라졌습니다.

약간의 측면 솔루션이지만 누군가를 도울 수 있습니다!

— 앤드류 세 인스 버리
소스

0

반응 없음으로 작업하는 동안 '없음'의 반대편에는 '플렉스'가 있습니다.

— NEELAMADHAB
소스

-2

visible : hidden은 요소를 숨기지 만 요소는 DOM과 함께 있습니다. 그리고 display : none의 경우 DOM에서 요소를 제거합니다.

따라서 요소에 숨기기 또는 숨기기 취소 옵션이 있습니다. 그러나 일단 삭제하면 (표시 없음) 반대 값을 지우지 않습니다. display : display : block, display : inline, display : inline-block 및 기타 여러 값이 있습니다. W3C에서 확인할 수 있습니다.

— 하디 크 손다 가르
소스

2

다른 값은 왜 display없습니까?

— Paul D. Waite

1

이것은 포괄적 인 목록이어야합니까? 그렇지 않습니다.

— Ry-

-2

가장 좋은 대답 display: none은

display:inline

또는

display:normal

— 야 시르
소스

2

와 같은 것은없는 것 같습니다 display:normal.

— Pang

-3

이것을 사용 display:block;하고 추가 할 수도 있습니다overflow:hidden;

— 벨
소스

1

자신의 의견을 기고하기 전에 기존 답변을 읽으십시오. 좋은, 잘 upvoted하고있다 받아 지난 5 월부터 대답은 또한이 투표의 부정의 총 대답 당신과 다소간 동일하다.

— Quentin

나는 대답을 보았다. Display : Unset은 Display : block뿐만 아니라 작동하지 않습니다. 내 의견 :) @Quentin

— Bel

그리고 display: blockA의 잘 작동하지 않습니다 <span>또는 <td>... 그리고 이전의 대답은 이미 언급했다 display: block.

— Quentin

2

언급하도록 답변을 수정했습니다 overflow: hidden. 왜? 그것을 추가하는 요점은 무엇입니까? 실행 취소와는 아무런 관련이 없습니다 display: none.

— Quentin

-4

가장 좋은 "반대"는 기본값 인 다음과 같이 반환하는 것입니다.

display: inline

— TimNguyenBSM
소스

그러나 display 속성에 기본값이 없다는 것을 분명히하고 싶지만 html 요소에는 있습니다. DIV의 기본값은 display : block이고 SPAN은 기본값 : inline입니다. 그러나 자체 디스플레이 속성에는 기본값이 없습니다.

— kevinius