CSS 요소를 숨기는 방법

display 속성display 속성을 없음으로 설정하면 상자 모델이 전혀 생성되지 않으며 숨길 때 공백이 남지 않습니다. 공간. 뿐만 아니라 디스플레이가 없음으로 설정되어 있는 한 직접적인 사용자 상호 작용은 불가능합니다. 또한 화면 판독기는 요소의 콘텐츠를 읽지 않습니다. 마치 해당 요소가 존재하지 않는 것과 같습니다.

또한 요소의 모든 하위 요소도 숨겨집니다. 이 속성은 애니메이션화할 수 없으므로 상태 간 전환이 항상 갑작스럽습니다.

요소는 여전히 DOM을 통해 액세스할 수 있습니다. 다른 요소처럼 조작할 수 있습니다. 예:

HTML 코드:

<div>Hover!</div>
<div class="o-hide"><p>0</p></div>
<div>0</div>

.o-hide {
  display: none;
  transition: all ease 0.8s;
}

.o-hide:hover {
  display: block;
}

.o-hide p {
  display: block;
  margin: 0;
  padding: 0;
}

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = &#39;<p>&#39; + count + &#39;</p>&#39;;
});

firstDiv.addEventListener("click", function(){
  oHide.style.display = "block";
});

Rendering:

두 번째 블록에 p 단락이 있고 표시 속성이 block으로 설정된 것을 볼 수 있습니다. . 그러나 세그먼트는 표시되지 않습니다. 이는 가시성: 숨김과 표시: 없음의 차이입니다. 첫 번째 경우, 표시 여부를 명시적으로 표시로 설정한 모든 하위 항목은 표시되지만 표시 속성에서는 발생하지 않습니다. display: none을 설정하면 표시 값에 관계없이 모든 하위 항목이 숨겨집니다.

이제 데모의 첫 번째 블록 위로 마우스를 몇 번 가져가세요. 방황한 적이 있나요? 첫 번째 블록을 클릭하세요. 이렇게 하면 두 번째 블록이 표시됩니다. 이제 내부의 개수는 0이 아닌 숫자여야 합니다. 이는 사용자에게 숨겨진 요소라도 JavaScript를 사용하여 조작할 수 있기 때문입니다

position属性

假设你有一个要与之交互的元素，但又不希望它影响网页布局。到目前为止，没有任何属性可以正确处理这种情况。在这种情况下，你可以做的一件事，那就是将元素移出视图窗口。这样它不会影响布局，仍然可以操作。

以下演示说明绝对定位如何隐藏元素和工作方式与上一个演示大致相同（html代码一样）：

css代码：

.o-hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.o-hide:hover {
  position: static;
}

js代码：

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});

firstDiv.addEventListener("click", function(){
    oHide.style.position = "static";
});

效果图：

这里的主要思想是将负的顶部和左侧值设置得足够高，以使元素在屏幕上不再可见。该技术的一个好处（或潜在的缺点）是屏幕阅读器可以读取绝对定位元素的内容。这是完全可以理解的，因为你只将元素移出视图窗口，以便用户无法看到它。

你应该避免使用此方法隐藏任何可以获得焦点的元素，因为当用户关注该元素时会导致意外跳转。此方法经常用于创建自定义复选框或单选按钮。

clip-path属性

隐藏元素的另一种方法是剪切它们。以前，这可以通过clip属性来完成，但是已经弃用了有利于更好的属性clip-path。

请注意，IE或Edge尚未完全支持下面clip-path属性值的使用。这是一个展示它的示例演示：

css代码：

.o-hide {
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

js代码：

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});


firstDiv.addEventListener("click", function(){
    oHide.className = "";
});

效果图：

如果将鼠标悬停在第一个元素上，它仍然可以影响第二个元素，即使它被clip-path属性隐藏。如果单击该元素，它将删除隐藏的类以显示我们一直存在的元素。这个文本仍然可以被屏幕阅读器阅读。

即使我们的元素不再可见，它周围的元素仍然表现得像它原来的矩形尺寸。请记住，在悬停区域之外，像悬停或点击等用户交互是不可能的。在我们的例子中，这意味着用户将无法直接与隐藏元素交互。此外，该属性能够以各种方式被动画化以产生新的效果。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

위 내용은 CSS 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!