CSS3에서 요소 숨기기를 제어하는 방법은 무엇입니까?
- 青灯夜游원래의
- 2022-01-13 13:49:061570검색
제어 방법: 1. 요소를 숨기려면 "display:none" 문을 사용하여 접근성 트리에서 요소를 제거합니다. 2. "visibility: hider" 문을 사용하여 요소를 보이지 않게 설정합니다. opacity: 0" " 문은 요소를 투명하게 설정합니다. 4. 요소를 화면 표시 위치에서 멀어지게 합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3가 요소 숨기기를 제어하는 방법
첫 번째 방법: 접근성 트리 제거
display : nonedisplay : none
display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>display : none</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
display : none;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第二种：隐藏元素
visibility: hidden
将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>visibility: hidden</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
visibility: hidden;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第三种：透明
opacity: 0
opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明)，将opacity设置为0会使元素完全透明，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>opacity: 0</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
opacity: 0;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>transparent
将元素的background-color、color和border-color设置为transparent(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transparent</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: transparent;
background-color: transparent;
border-color: transparent;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>rgba(0,0,0,0)
从技术上说，transparent是 rgba(0,0,0,0) 的简写，将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>rgba(0,0,0,0)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>rgba只需要第四个参数为0即可达到隐藏元素的效果。
hsla(0,0%,0%,0)
hsla使用元素隐藏的机制与rgba一致，都是由第四个参数Alpha所控制的，将元素的background-color、color和border-color设置为hsla(0,0%,0%,0)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>hsla(0,0%,0%,0)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
color: hsla(0,0%,0%,0);
background-color: hsla(0,0%,0%,0);
border-color: hsla(0,0%,0%,0);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>hsla和rgba一致，只需要第四个参数为0即可达到隐藏元素的效果。
filter: opacity(0%)
filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>filter: opacity(0%)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
filter: opacity(0%);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>第四种：缩放
transform: scale(0, 0)
将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素，此元素会显示，也会占用位置，但是因为已经缩放到0%，元素和内容占用像素比为0*0，所以看不到此元素及其内容，也无法点击。
代码：
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>transform: scale(0, 0)</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
transform: scale(0,0);
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>width: 0;height: 0;overflow: hidden
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>width: 0;height: 0;overflow: hidden</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
width:0;
height:0;
overflow: hidden;
border-width: 0;/* user agent stylesheet中border-width: 2px; */
padding: 0;/* user agent stylesheet中padding: 1px 6px; */
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>세 번째 유형: Transparent
불투명도: 0opacity(불투명도), 값 범위 0(완전 투명) ~ 1(완전 불투명), 불투명도를 다음으로 설정합니다. 0은 요소를 완전히 투명하게 만듭니다. 이 경우 요소는 투명하기 때문에 표시되지 않고 여전히 접근성 트리에 있으며 클릭 이벤트 등록이 유효합니다. <!DOCTYPE html>
<html>
<head>
<meta name="charset" content="utf-8"/>
<title>脱离屏幕显示位置</title>
<style type="text/css">
p {
background-color: red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 24px;
}
button {
background-color: black;
color: white;
}
#bt {
position: fixed;
top: -100px;
left: -100px;
}
</style>
</head>
<body>
<p>
<button id="normal">按钮</button>
</p>
<p>
<button id="bt">按钮</button>
</p>
<script type="text/javascript">
let normal = document.getElementById('normal');
let bt = document.getElementById('bt');
normal.addEventListener('click',function(){
alert('click normal');
})
bt.addEventListener('click',function(){
alert('click bt');
})
</script>
</body>
</html>
transparent요소의 배경색, 색상, 테두리 색상을 투명(투명)으로 설정합니다. 이때 요소는 보이지 않습니다(왜냐하면). transparent), 여전히 접근성 트리에 위치하여 클릭 이벤트 등록이 가능합니다. Code: rrreee
rgba(0,0,0,0)기술적으로 투명이란 rgba(0,0,0,0)의 약어로 배경을 바꾸는 것입니다. -color, color 및 border-color 요소는 rgba(0,0,0,0)(투명)으로 설정됩니다. 이때 요소는 투명하기 때문에 표시되지 않으며 여전히 접근성 트리에 있습니다. 클릭 이벤트가 유효합니다. 코드: rrreeergba는 요소 숨기기 효과를 얻으려면 네 번째 매개변수만 0이면 됩니다.
hsla(0,0%,0%,0)🎜🎜hsla는 rgba와 동일한 요소 숨기기 메커니즘을 사용하며 둘 다 요소의 배경색을 변경하는 네 번째 매개변수 Alpha에 의해 제어됩니다. color 및 border-color는 hsla(0,0%,0%,0)로 설정됩니다. 이 시점에서는 요소가 표시되지 않고(투명하기 때문에) 여전히 접근성 트리에 있으며 클릭 이벤트 등록이 유효합니다. . 🎜🎜코드: 🎜rrreee🎜hsla는 rgba와 동일합니다. 요소 숨기기 효과를 얻으려면 네 번째 매개변수만 0입니다. 🎜🎜
filter: opacity(0%)🎜🎜filter(필터) opacity(0% ~ 100%)는 이미지의 투명도를 변환하며, 값 범위는 0%(완전 투명)입니다. ) ~ 100%(완전 불투명). 요소의 필터를 불투명도(0%)로 설정합니다. 이때 요소는 투명하기 때문에 보이지 않으며 여전히 접근성 트리에 있습니다. 🎜🎜Code: 🎜rrreee🎜🎜Fourth: Scale🎜🎜🎜transform: scale(0, 0)🎜🎜transform을 scale(0, 0)으로 설정하면 x축에 요소가 만들어지고 y축은 0픽셀로 스케일링되어 위치를 차지하게 됩니다. 그러나 0%로 스케일링되었기 때문에 해당 요소와 콘텐츠가 차지하는 픽셀 비율은 0*0입니다. 콘텐츠를 볼 수 없으며 클릭할 수 없습니다. 🎜🎜Code: 🎜rrreee🎜width: 0;height: 0;overflow: hide🎜🎜너비와 높이를 모두 0으로 설정하여 요소가 차지하는 픽셀 비율은 0*0이 되지만 이때 두 가지 상황이 발생합니다. 🎜🎜🎜🎜요소의 표시 속성이 인라인인 경우 요소 콘텐츠가 요소의 너비와 높이를 늘립니다. 🎜🎜🎜🎜요소의 표시 속성이 블록 또는 인 경우; inline-block에서는 요소의 너비와 높이가 0이지만 요소 내용은 여전히 정상적으로 표시됩니다. 이때 Overflow:hidden을 추가하면 요소 외부의 요소 내용이 잘릴 수 있습니다. 🎜🎜🎜🎜이 방법과 변환: scale(0,0)의 차이점은 변환: scale(0,0)은 요소와 콘텐츠의 크기를 모두 조정하는 반면, 이 방법은 요소의 크기를 0px로 조정한 다음 요소를 자릅니다. 요소 외부의 콘텐츠. 🎜🎜코드: 🎜rrreee🎜🎜다섯 번째 방법: 화면 표시 위치 끄기🎜🎜🎜화면 표시 위치를 끄면 요소가 보이지 않게 될 수도 있지만 이 효과를 구현하기에는 CSS 스타일이 너무 많습니다. 한 상황. 🎜🎜코드: 🎜rrreee🎜(동영상 공유 학습: 🎜css 동영상 튜토리얼🎜)🎜위 내용은 CSS3에서 요소 숨기기를 제어하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.