CSS で隠し要素を実現する 7 つの興味深い方法
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面接で常によくある質問です。
要素を非表示にできる display、visibility、opacity 属性に加えて、要素を非表示にできる他の属性はありますか?彼らの間にはどんな必然的なつながりがあるのでしょうか?今日はそれについてお話しします。 注: スペースが限られているため、この記事では filter:alpha(opacity=0); zoom:0; などの互換性のあるプロパティについては説明していません。 まず、アクセシビリティツリーから削除する
display プロパティでは、要素の内部および外部の表示タイプを設定できます。 display を none に設定すると、要素がアクセシビリティ ツリーから削除されます。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>表示: なし</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
表示: なし;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
2番目のタイプ: 隠し要素
visibility を hidden に設定すると要素は非表示になりますが、要素はアクセシビリティ ツリー内に残ります (display: none が設定されている場合、要素はアクセシビリティ ツリーから削除されます)。また、クリック イベントを登録しても効果はありません。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>可視性: 非表示</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
可視性: 非表示;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>3番目のタイプ: 透明
opacity（不透明度）、値の範囲は0（完全に透明）〜1（完全に不透明）です。opacityを0に設定すると、要素は完全に透明になります。このとき、要素は見えません（透明なため）が、アクセシビリティツリーにはまだ存在し、登録されたクリックイベントは有効です。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>不透明度: 0</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
不透明度: 0;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html> 要素の背景色、色、境界線の色を透明に設定します。要素は透明であるため見えなくなりますが、アクセシビリティ ツリーにはまだ存在し、登録されたクリック イベントは有効です。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>透明</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
色: 透明;
背景色: 透明;
境界線の色: 透明;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
技術的には、transparent は rgba(0,0,0,0) の省略形であり、要素の背景色、色、境界色を rgba(0,0,0,0) (透明) に設定します。この時点では、要素は表示されません (透明なため) が、アクセシビリティ ツリーにはまだ存在し、登録されたクリック イベントは有効です。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>rgba(0,0,0,0)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
色: rgba(0,0,0,0);
背景色: rgba(0,0,0,0);
境界線の色: rgba(0,0,0,0);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
rgba では、要素を非表示にする効果を得るために、4 番目のパラメータを 0 にするだけで済みます。 hsla が使用する要素の非表示メカニズムは rgba と一致しており、4 番目のパラメータ Alpha によって制御されます。要素の背景色、色、境界色は hsla (0, 0%, 0%, 0) に設定されます。この時点では、要素は見えません (透明なため) が、アクセシビリティ ツリーにはまだ配置されており、登録されたクリック イベントは有効です。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>hsla(0,0%,0%,0)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
色: hsla(0,0%,0%,0);
背景色: hsla(0,0%,0%,0);
境界線の色: hsla(0,0%,0%,0);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
hsla と rgba は同じであり、要素を非表示にする効果を得るには 4 番目のパラメータのみを 0 にする必要があります。 フィルターの不透明度 (0% ~ 100%) は、画像の透明度を変換します。値の範囲は 0% (完全に透明) ~ 100% (完全に不透明) です。要素のフィルターを不透明度 (0%) に設定します。要素は透明であるため見えなくなりますが、アクセシビリティ ツリーにはまだ存在し、登録されたクリック イベントは有効です。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>フィルター: 不透明度(0%)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
フィルター: 不透明度(0%);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリック');
})
</スクリプト>
</本文>
</html>4番目: ズーム
transform を scale(0, 0) に設定すると、要素は x 軸と y 軸の両方で 0 ピクセルに拡大縮小されます。要素は表示され、位置を占めますが、0% に拡大縮小されているため、要素とそのコンテンツが占めるピクセル比は 0*0 となり、要素とそのコンテンツは表示されず、クリックもできません。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>変換: スケール(0, 0)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
変換: スケール(0,0);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>
幅と高さの両方を 0 に設定すると、要素は 0*0 のピクセル比を占めますが、この時点で次の 2 つの状況が発生します。 このメソッドと transform: scale(0,0) の違いは、transform: scale(0,0) は要素とそのコンテンツの両方を拡大縮小するのに対し、このメソッドは要素を 0px に拡大縮小してから要素の外側のコンテンツを切り取ることです。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>幅: 0;高さ: 0;オーバーフロー: 非表示</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
幅:0;
高さ:0;
オーバーフロー: 非表示;
border-width: 0;/* ユーザーエージェントスタイルシートでは border-width: 2px; */
padding: 0;/* ユーザーエージェントスタイルシート padding: 1px 6px; */
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>5番目: ローテーション
要素を非表示にするには、要素を X 軸に沿って時計回りに 90 度回転させます。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>変換: rotateX(90deg)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
変換: rotateX(90deg);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリック');
})
</スクリプト>
</本文>
</html> 要素を非表示にするには、要素を Y 軸に沿って時計回りに 90 度回転させます。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>変換: rotateY(90deg)</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
変換: rotateY(90deg);
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリック');
})
</スクリプト>
</本文>
</html>
6番目のタイプ: オフスクリーン表示位置要素を画面外に移動して非表示にすることもできますが、この効果を実現するには CSS スタイルが多すぎます。ここでは例のみを示します。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>オフスクリーン表示位置</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
位置: 固定;
上: -100px;
左: -100px;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div>
<button id="bt">ボタン</button>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>7番目: カバー要素マスクを使用して要素を非表示にすることもできます。この効果を実現するための CSS スタイルは多数あるため、ここでは例のみを示します。 コード： <!DOCTYPE html>
<html>
<ヘッド>
<meta name="charset" content="utf-8"/>
<title>表紙</title>
<スタイル タイプ="text/css">
div {
背景色: 赤;
幅: 100ピクセル;
高さ: 100px;
行の高さ: 100px;
テキスト配置: 中央;
上マージン: 24px;
}
ボタン {
背景色: 黒;
色: 白;
}
#bt {
Zインデックス: -1;
位置: 絶対;
上位: 50%;
左: 50%;
変換: translate(-50%,-50%);
}
＃カバー {
zインデックス: 1;
位置: 絶対;
上: 0;
左: 0;
マージン: 0;
}
</スタイル>
</head>
<本文>
<div>
<button id="normal">ボタン</button>
</div>
<div style="position: relative;line-height: normal;">
<button id="bt">ボタン</button>
<div id="カバー"></div>
</div>
<script type="text/javascript">
通常の値を document.getElementById('normal') に設定します。
bt = document.getElementById('bt'); とします。
normal.addEventListener('click',function(){
alert('通常クリック');
})
bt.addEventListener('クリック',function(){
alert('btをクリックしてください');
})
</スクリプト>
</本文>
</html>参照する
これで、CSS で隠し要素を実装する 7 つの興味深い方法についての記事は終了です。CSS 隠し要素に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 |
>>: ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?
推薦する
vue3.0 のウォッチ リスナーの例の詳細な説明
目次序文リスナーと計算プロパティの違いvue3 で watch を使用するにはどうすればいいですか?...
JS がビデオ弾幕効果を実現
これを実現するには、ES6 モジュール開発とオブザーバー モードを使用します。オブザーバー パターン...
SeataがMySQL 8バージョンを使用できない問題を解決する方法
考えられる理由: Seata が MySQL 8 をサポートしない主な理由は、接続ドライバーがバージ...
JS は Baidu 検索ボックスを実装します
この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...
JavaScript/TypeScript で同時リクエスト制御を実装するためのサンプルコード
シナリオリクエストが 10 件あるが、同時リクエストの最大数は 5 件で、リクエスト結果が必要である...
ファイアウォールルールの設定とコマンド（ホワイトリスト設定）の詳しい説明
1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...
deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順
ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...
Nginx サーバーの https 設定方法の例
Linux: Linux バージョン 3.10.0-123.9.3.el7.x86_64 ngin...
画像のフェードインとフェードアウト効果を実現する js
この記事では、画像のフェードインとフェードアウトを実現するためのjsの具体的なコードを参考までに紹介...
HTML要素にフォーカスを設定する方法
コードをコピーコードは次のとおりです。 <本文<フォームアクション="&quo...
Ubuntu 20.04にvncserverをインストールする方法
Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...
docker runとstartの違い
docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...
CSSの記述形式、モバイルページの基本構造の詳細な説明
1. CSSの記述形式1. インラインスタイルCSSコードを開始タグに直接記述することができます&l...
Vue要素と多言語切り替えの詳細な説明
目次序文複数の言語を切り替えるにはどうすればいいですか? 1. vue-i18nパッケージをインスト...
Vue で eslint 検出をオフにする方法 (複数の方法)
目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...