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 を応援していただければ幸いです。 |
>>: ベンダー プレフィックス: ブラウザ エンジン プレフィックスが必要なのはなぜですか?
推薦する
JavaScript はフロントエンド Web ページでカウントダウンを実装します
ネイティブJavaScriptを使用してカウントダウンを簡単に実装します。参考までに、具体的な内容は...
Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...
JS オブジェクトのコピー (ディープ コピーとシャロー コピー)
目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...
MySQL 文字列連結と null 値の設定のためのインスタンス メソッド
#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...
Windows での MySQL 5.7.10 のインストールと設定のチュートリアル
MySQL は、ユーザーごとに 2 つの異なるバージョンを提供します。 MySQL コミュニティ サ...
JSメモリ空間の詳細な説明
目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...
JavaScript のよりエレガントなエラー処理方法 async await
目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...
MySQL 8.0 アップグレード体験
目次序文1. まず、既存のバージョンの MySQL を完全にアンインストールします。 2. deb ...
Next.js 入門チュートリアル
目次導入Next.jsプロジェクトを作成するNext.js プロジェクトを手動で作成するcreact...
大規模な MySQL テーブルに対する count() の実装を最適化しました
以下は、B+ ツリーのデータ構造と実験結果からの推測に基づいた私の判断です。間違いがあればご指摘くだ...
Linux に起動方法を追加する (サービス/スクリプト)
システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...
IDEA で Docker プロジェクトをデプロイする手順
現在、ほとんどのプロジェクトが Docker 上にデプロイされ始めていますが、デプロイのプロセスはま...
HTML で入力ボックスに純粋な数字のみを入力するように制限する方法
inputボックスを純粋な数字のみに制限する1、onkeyup = "value=valu...
Vueで親子コンポーネント通信を実装する方法
目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...
Docker ポート マッピングと外部アクセス不可の問題
Docker コンテナはサービスを提供し、ポート 8888 をリッスンします。外部からアクセスできる...