디스플레이의 반대가 있습니까: 없음?

디스플레이의 반대가 있습니까: 없음?

의 입니다.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-blocketc — 이 값에 대한 설명서를 참조하십시오.

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

다모든값른에 대한 모든 display요소를 페이지의 일부로 만들기 때문에 어떤 의미에서 그들은 모두 반대입니다.display:none.

하지만 그것과 직접적인 반대의 가치는 없습니다.display:none"머리 스타일"과 반대되는 헤어 스타일은 하나도 없는 것처럼.

의 입니다.display: none아직 없습니다

그렇지만display: unset매우 가까우며 대부분의 경우 작동합니다.

출처: MDN(Mozilla Developer Network):

unset CSS 키워드는 initial 키워드와 initive 키워드의 조합입니다.이 두 개의 다른 CSS 전체 키워드처럼 CSS 단축형을 포함한 모든 CSS 속성에 적용할 수 있습니다.이 키워드는 속성이 상위 항목에서 상속되면 상속된 값으로 재설정하고 그렇지 않으면 초기 값으로 재설정합니다.즉, 첫 번째 경우에는 inherit 키워드처럼 동작하고 두 번째 경우에는 inherit 키워드처럼 동작합니다.

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

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

요소의 값을 변경할 때display를 '취소입니다.element.style.display = "none"이라element.style.display = ""이렇게 하면 다음 항목이 제거됩니다.display로터의선언의 style하는 속성, 실값되리기돌display문서의 스타일시트에 설정된 값에 대한 속성(다른 곳에서 다시 정의되지 않은 경우 브라우저 기본값에 대한 속성).더할 수 있는 은 CSS로 수업을 입니다.

.invisible { display: none; }

이름을 "" "/" "에"element.className.

여기 미래의 답이 있습니다. 여러분이 질문을 한 지 약 8년 후에 말입니다.에 대한 반대의 가치는 여전히 존재하지 않습니다.display: none에 대해 . 더더 좋은 것이 있습니다.

그display부동산이 너무 과중해서 재미가 없습니다.적어도 세 가지 다른 기능이 있습니다.다음을 제어합니다.

• 유형 요소가 레이아웃에 ).block,inline)
• 유형 어린이 요소의 ).flex,grid)
• box(contents,none).

이것은 너무 오랫동안 현실이었고, 우리는 그것과 함께 사는 법을 배웠지만, (바라건대!) 오래 지연된 몇 가지 개선이 우리의 방식으로 오고 있습니다.

Firefox는 이제 2-값 구문(또는 다중 키워드 값)을 지원합니다.display외부 디스플레이 유형과 내부 디스플레이 유형을 구분하는 속성입니다.를 들면, 들면를예,block 제는이가 됩니다.block flow,그리고.flex 되다block flex은 문제은를해못다합니지결 를 해결하지 못합니다.none하지만 명백한 우려의 분리는 제가 생각하는 올바른 방향으로의 한 걸음입니다.

한편 크롬(85+)은 우리에게 부동산을 주었고, 팡파르와 함께 발표했습니다.뷰포트에 접근할 때까지 요소(및 하위 레이아웃)를 렌더링하지 않고 '찾기' 검색 등에 액세스할 수 있을 때까지 페이지 로드 시간을 단축하는 것을 목표로 합니다.값을 지정하는 것만으로 자동으로 이 작업을 수행합니다.auto이것은 그 자체로 흥미로운 뉴스입니다. 하지만 또 다른 기능이 무엇인지 살펴 보십시오.

그content-visibility: hidden 않은 및 캐시된 합니다.content-visibility: auto화면 밖에서 수행합니다., 나과는달리와 auto화면에 자동으로 렌더링되지 않습니다.

이렇게 하면 요소의 내용을 숨기거나 나중에 빠르게 숨길 수 있는 제어 기능이 향상됩니다.

요소의 내용을 숨기는 다른 일반적인 방법과 비교합니다.

• display: none요소를 숨기고 렌더링 상태를 파괴합니다.즉, 요소 숨김을 해제하는 것은 동일한 내용을 가진 새 요소를 렌더링하는 것만큼 비용이 많이 든다는 것을 의미합니다.
• visibility: hidden요소를 숨기고 렌더링 상태를 유지합니다.요소(및 하위 트리)가 페이지에서 여전히 기하학적 공간을 차지하고 계속 클릭할 수 있기 때문에 문서에서 요소를 제거하지는 않습니다.또한 숨겨진 경우에도 필요할 때마다 렌더링 상태를 업데이트합니다.

content-visibility: hidden 표시될 반렌상유요숨서깁다니소면를지하태를링더면숨다▁thei▁on▁happen▁when니깁▁that요유▁is상서소를▁only지▁hides▁while면하▁again▁state태,를▁they▁(▁element▁element반▁shown▁the면▁the링). 따라서 변경해야 할 사항이 있는 경우 요소가 다시 표시될 때만 변경 사항이 발생합니다(즉,content-visibility: hidden속성이 제거됨).

죠. ㅠㅠㅠㅠㅠㅠㅠdisplay: none레이아웃에서 요소를 우아하고 완전히 디스플레이 유형과 독립적으로 제거하는 방법이어야 합니다!그래서 의 '반대'는content-visibility: hidden이라content-visibility: visible하지만 당신은 세 번째, 매우 유용한 옵션을 가지고 있습니다.auto느린 렌더링을 통해 초기 페이지 로드 속도를 높일 수 있습니다.

여기서 유일한 나쁜 소식은 파이어폭스와 사파리가 아직 그것을 채택하지 않았다는 것입니다.하지만 여러분(친애하는 동료 개발자)이 이 글을 읽고 있을 때쯤이면 상황이 바뀌었을지도 모릅니다.https://caniuse.com/css-content-visibility! 을 주시하고 있습니다.

Paul이 설명한 것처럼 문자 그대로 디스플레이의 반대는 없습니다. 각 요소는 기본 디스플레이가 다르며 클래스나 인라인 스타일 등을 사용하여 디스플레이를 변경할 수도 있기 때문에 HTML에는 아무것도 없습니다.

그러나 jQuery와 같은 것을 사용하는 경우 표시 및 숨기기 기능은 표시되지 않는 것과 반대로 작동합니다.요소를 숨겼다가 다시 표시하면 요소는 숨기기 전과 동일한 방식으로 표시됩니다.요소를 숨길 때 표시 속성의 이전 값을 저장하여 다시 표시할 때 요소를 숨기기 전과 동일한 방식으로 표시되도록 합니다.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의 표시 속성은 숨겨졌다가 다시 표시된 후에도 일정하게 유지됩니다(표시 없음).

사용할 수 있습니다.

display: normal;

정상적으로 작동합니다.css의 작은 해킹입니다 ;)

사용합니다display:block;저한테는 효과가 있어요.

프린터에 적합한 스타일시트의 경우 다음을 사용합니다.

/* 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를 사용하여 스팬 태그의 값을 업데이트할 수 있지만 저의 경우에는 그럴 필요가 없었습니다.아마도 가장 우아한 해결책은 아니지만 저에게는 효과가 있었습니다!

저는 앱을 만들 때 다른 사용자들이 아닌 특정 사용자들을 위해 숨겨진 테이블을 원하는 이 문제에 부딪혔습니다.

처음에는 디스플레이: 없음으로 설정했다가 표시: 인라인 블록으로 설정했습니다. 보기를 원했지만 예상되는 포맷 문제(컬럼이 통합되거나 일반적으로 지저분함)를 경험했습니다.

제가 작업한 방법은 먼저 표를 보여준 다음 보기 싫은 사용자를 위해 "display:none"을 수행하는 것이었습니다.이렇게 하면 정상적으로 포맷되었지만 필요에 따라 사라집니다.

약간의 측면 해결책이지만 누군가에게 도움이 될 수도 있습니다!

표시: 블록을 사용할 수 있습니다.

예:

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

react native로 작업할 때 'flex'의 반대말은 'flex'입니다.

원래 상태로 되돌리기:

 display=""

사용하다display: revert

https://developer.mozilla.org/en-US/docs/Web/CSS/revert 에 명시된 문서에서 확인할 수 있습니다.

revert CSS 키워드는 속성의 계단식 값을 현재 값에서 현재 요소에 대한 현재 스타일 오리진의 변경이 없는 경우 속성이 가질 수 있는 값으로 되돌립니다.따라서 속성이 상위에서 상속되거나 사용자 에이전트의 스타일시트(또는 있는 경우 사용자 스타일별)에 의해 설정된 기본값으로 속성이 상속된 값으로 재설정됩니다.모든 CSS 단축 속성을 포함하여 모든 CSS 속성에 적용할 수 있습니다.

모든 주요 브라우저에서 지원됩니다. - https://caniuse.com/css-revert-value

visibility:숨김은 요소를 숨기지만 요소는 DOM과 함께 해당 요소입니다.그리고 디스플레이의 경우: 없음은 DOM에서 요소를 제거합니다.

요소를 숨기거나 숨길 수 있는 옵션이 있습니다.그러나 삭제하면(표시 안 함) 반대 값이 명확하지 않습니다. 표시에는 표시 블록, 표시: 인라인, 표시: 인라인 블록 등 여러 가지 값이 있습니다.W3C에서 확인하실 수 있습니다.

디스플레이:설정을 해제하면 이전 "디스플레이" 값이 아닌 일부 초기 설정으로 돌아갑니다.

나는 방금 이전 디스플레이 값(내 경우 디스플레이: 플렉스;)을 다시(디스플레이가 아닌 후) 복사했고, 디스플레이를 다시 시도했습니다: 성공적으로 실행했습니다.

(저는 디스플레이를 사용했습니다: 모바일과 작은 화면을 위한 요소를 숨기기 위한 도구)

최선대답에 대한 가장 display: none이라

display:inline

또는

display:normal

최상의 "반대"는 다음과 같은 기본값으로 되돌리는 것입니다.

display: inline

이것을 사용할 수 있습니다.display:block; 추합니다도 합니다.overflow:hidden;

언급URL : https://stackoverflow.com/questions/17630945/is-there-an-opposite-to-displaynone