페이지에 공간을 차지하지 않고 요소를 숨기는 방법은?
사용하고 있습니다.visibility:hidden특정 요소를 숨기지만 숨겨진 상태에서 페이지의 공간을 차지합니다.
DOM에 전혀 없는 것처럼(실제로 DOM에서 제거하지 않고) 시각적으로 완전히 사라지게 하려면 어떻게 해야 합니까?
설정해보기display:none숨어서 설정하다display:block보여주기 위해서.
스타일 대신에 스타일을 사용합니다.
<div style="display:none;"></div>
토글링display는 원활한 CSS 전환을 허용하지 않습니다.대신 둘 다 전환합니다.visibility그리고.max-height.
visibility: hidden;
max-height: 0;
사용방법display:none요소를 제거하는 데만 좋은 옵션이지만 화면 판독기의 경우에도 제거됩니다.SEO에 영향을 미치는지에 대한 논의도 있습니다.A List Apart에 그 주제에 대한 좋은 짧은 기사가 있습니다.
요소를 제거하지 않고 숨기기만 원하는 경우 다음을 사용하는 것이 좋습니다.
div {
position: absolute;
left: -999em;
}
이와 같이 화면 판독기로도 읽을 수 있습니다.
이 방법의 유일한 단점은 이 DIV가 실제로 렌더링되어 성능에 영향을 줄 수 있다는 것이며, 특히 휴대 전화의 성능에 영향을 줄 수 있다는 것입니다.
봐요, 사용하는 대신에visibility: hidden;사용하다display: none;. 첫 번째 옵션은 숨지만 공간을 확보하고 두 번째 옵션은 숨어서 공간을 확보하지 않습니다.
display: none is solution, 즉 공간과 함께 요소를 완전히 숨깁니다.
에 관한 이야기와
visibility:hidden 태그는 보이지 않지만 페이지에 공간이 할당되어 있음을 의미합니다.
display:none 의미는 공간과 함께 요소를 완전히 숨깁니다.(DOM을 통해 상호 작용할 수 있지만)
이 질문에 대한 답은 display:none 및 display:block을 사용하라는 것이지만, css 전환을 사용하여 가시성 속성을 사용하여 콘텐츠를 표시하고 숨기려는 사용자에게는 도움이 되지 않습니다.
디스플레이를 사용하면 CSS 전환이 사라지기 때문에 이것 또한 나를 미치게 했습니다.
한 가지 해결책은 가시성을 사용하는 클래스에 이를 추가하는 것입니다.
overflow:hidden
이것이 작동하려면 레이아웃에 따라 다르지만, 빈 내용은 위치한 부서 내에 유지해야 합니다.
display:none숨어서 설정하다display:block보여주기 위해서.
디스플레이 후에 다시 놓는 것에 대한 다른 의견이 있습니다: none. 디스플레이 사용 안 함: 블록/inline 등.대신(자바스크립트를 사용하는 경우) cs 속성 표시를 '로 설정합니다(예: 공백).
$('#abc').css({"display":"none"});
내용을 숨기고 빈 공간을 남기지 않습니다.
내가 아는 한 그것은 4가지 방법으로 가능합니다.
- HTML
<button style="display:none;"></button> - CSS
#buttonId{ display:none; } - jQuery
$('#buttonId').prop('display':'none');&$("#buttonId").css('opacity', 0);
display: 페이지의 공백을 차지하지 않으려면 none가 가장 좋습니다.
이 질문 덕분에.나는 정반대의 것을 원했습니다. 즉 숨겨진 디브가 브라우저의 공간을 여전히 차지해야 한다는 것입니다.그래서 제가.visibility: hidden대신에display: none.
저는 이 문제를 해결하고 조사를 해왔기 때문에 제 통찰력을 공유해 보려고 생각했습니다.이 페이지를 접했다면 스타일에도 불구하고 페이지의 공간을 차지하는 요소를 이해하려는 것 같습니다.display = "none".
아마도, 이것에 대한 이유는 문제의 요소가 아니라 자녀, 부모 또는 형제자매 때문일 것입니다.콘솔을 열고 요소 탭으로 이동합니다.무엇이 우주를 차지하고 있을지에 대한 단서를 찾기 위해 안을 보세요.어쩌면 템플릿 엔진을 사용하고 있을 수도 있고, 그 엔진을 사용하고 있을 수도 있습니다.<br>다이나믹 밖에서 렌더링을 하고 있었습니다.<div> 더 해야 할 도 있습니다 또는 더 많은 중첩 요소를 대상으로 지정해야 할 수도 있습니다.문제를 해결하는 동안 이러한 선을 따라 생각해 보십시오.
요소를 숨기기 위한 다른 모든 옵션이 사용자에게 적합하지 않은 경우 언급되지 않은 다른 옵션이 있습니다.요소에 자식이 없다고 가정하면 작동합니다.
공간을 차지하지 않고 요소를 숨깁니다.
display: contents;
브라우저 지원은 새로운 CSS 기능이므로 확인합니다.
가시성이 숨겨지도록 설정된 상태에서 공간을 차지하지 않도록 하는 유일한 유일한 방법은 사용하는 것입니다.position:absolute상단, 좌측 등의 파라미터를 설정합니다.이상적이지는 않지만 효과는 있습니다.
표시되는 경우: none; clear: none; clear를 추가할 필요가 없습니다; none;
언급URL : https://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page
'source' 카테고리의 다른 글
| 텍스트 상자에서 플라스크로 데이터를 보내시겠습니까? (0) | 2023.10.24 |
|---|---|
| C가 왜 "가짜 배열"을 가지고 있을까요? (0) | 2023.10.24 |
| mysql 프로세스를 중지할 수 없습니다. (0) | 2023.10.24 |
| jax가 있는 파일에서 JSON 개체를 로드하려면 어떻게 해야 합니까? (0) | 2023.10.24 |
| wait3(waitpid alias)는 ECHILD로 설정된 오류가 없는 -1을 반환합니다. (0) | 2023.10.24 |