ホームページ > 記事 > ウェブフロントエンド > CSS3で要素の非表示を制御する方法は何ですか
CSS3で要素の非表示を制御する方法は何ですか
- 青灯夜游オリジナル
- 2022-01-13 13:49:061571ブラウズ
制御方法: 1. "display:none" ステートメントを使用してアクセシビリティ ツリーから要素を削除し、それによって要素を非表示にします; 2. "visibility: hidden" ステートメントを使用して要素を非表示に設定します; 3.「opacity: 0」ステートメントを使用して要素を透明に設定します; 4.要素を画面表示位置から遠ざけるなどします。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css3 が要素の非表示を制御する方法
最初の方法: アクセシビリティ ツリーを削除します
表示: none
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>2 番目のタイプ: 非表示要素
visibility: hidden
可視性設定の変更hidden にすると要素は非表示になりますが、この時点では要素はまだアクセシビリティ ツリー内にあります (要素は表示時にアクセシビリティ ツリーの外に移動します: 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>3 番目のタイプ: 透明
不透明度: 0
不透明度(透明度なし) )、値の範囲は 0 (完全に透明) ～ 1 (完全に不透明) です。不透明度を 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
要素の背景色、色、境界線の色を透明(透明)に設定します。この時点では、要素が非表示 (透明であるため) のまま、アクセシビリティ ツリー内にあり、クリック イベントの登録は有効です。
コード:
<!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)
技術的に言えば、透明は rgba(0,0, 0, 0)、要素の背景色、色、境界線の色を 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 で要素を非表示にする効果を得るには、4 番目のパラメーターを 0 にするだけで済みます。
hsla(0,0%,0%,0)
hsla は rgba と同じ要素非表示メカニズムを使用します。どちらも 4 番目のパラメーター Alpha によって制御されます。要素の背景色、色、境界線の色を 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 と同じですが、要素を非表示にする効果を得るために 4 番目のパラメーターのみが 0 です。
filter: opacity(0%)
filter (フィルター) 不透明度 (0% ～ 100%) は、画像の透明度、値の範囲を変換します。 0% (完全に透明) ～ 100% (完全に不透明) の間です。要素のフィルターを不透明度(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>4 番目: スケーリング
transform:scale(0, 0)
変換を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
要素が占めるように幅と高さの両方を 0 に設定します。ピクセル比率は 0*0 ですが、この時点で次の 2 つの状況が発生します。
-
要素の表示属性がインラインの場合、要素のコンテンツは、要素の幅と高さを引き伸ばします。 element;
要素の表示属性がblockまたはinline-blockの場合、要素の幅と高さは0になりますが、要素の内容は正常に表示されます。 overflow:hidden; 要素の外側をトリミングします。要素の内容。
このメソッドとtransform:scale(0,0)の違いは、transform:scale(0,0)は要素とコンテンツの両方をスケーリングするのに対し、このメソッドは要素とコンテンツの両方をスケーリングすることです。要素とコンテンツ。要素を 0px にスケールし、要素の外側の要素コンテンツをトリミングします。
コード:
<!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>5 番目のタイプ: オフスクリーン表示位置
オフスクリーン表示位置によって要素が非表示になることもありますが、これを実現するにはこれはエフェクトの CSS スタイルが多すぎるため、ここではほんの 1 つの例を示します。
コード:
<!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>(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSS3で要素の非表示を制御する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。