[CSSチュートリアル】Display, Visibility, Opacity, rgba, z-indexのcss。-1差分
2022-02-02 22:01:45
私たちはしばしば、ウェブページのいくつかの要素の非表示、透明などのプロパティを制御する必要があります。
<style>
.d1{
display: none;
}
.d2{
visibility: visible;
}
.d3{
opacity: 0;
}
</style>
<div class="d1" onclick="clickEvent('display: none;')"></div>
<div class="d2" onclick="clickEvent('visibility: hidden;')"></div>
<div class="d3" onclick="clickEvent('ability: 0;')"></div>
<script type="text/javascript">
function clickEvent(type){
alert(type)
}
</script>
display: none;
- DOM構造: ブラウザはスペースを取らないdisplay:none;の要素をレンダリングしない
- イベントリスニング:DOMイベントのリスニングができない
- パフォーマンス この属性を動的に変更すると、並べ替えが発生し、パフォーマンスが低下する
- 継承:子要素もレンダリングされないため、子要素には継承されません。
- transition transition: transitionは表示をサポートしない
visibility: hidden;
- DOM構造:要素は非表示ですが、消えることなくレンダリングされ、スペースを占有しています。
- イベントリスニング。DOMイベントリスニングができない
- パフォーマンス:この属性の動的な変更は再描画を引き起こし、パフォーマンスが向上する
- 継承:子要素に継承されるが、子要素はvisibility: visibleの設定により非表示にすることができる。
- transition transition:visibleは即座に表示、hiddenは遷移させることができる
opacity: 0;
- DOM構造:透明度100%では、要素は隠され、スペースを占有します。
- イベントリスニング:DOMイベントをリスニングすることができる
- パフォーマンス:コンポジットレイヤーに昇格し、再描画をトリガーしないため、より高いパフォーマンスが得られます。
- 継承:子要素に継承され、子要素は不透明度:1では非表示にできない。
- transition transition: hideとshowの両方でtransitionがサポートされています。
ルグバ
- background: rgba(R, G, B, 0)、背景色が透明で、要素が透明なだけで、まだスペースを取っています。
- background:rgba(R, G, B, 0)は子要素に継承されません。
- すでにバインドされているイベントをまだ発生させます。
- トランジションは有効です。
z-index: -1
- z-indexの設定は、要素の現在のdomがドキュメントフローから外れている(position:absolute)場合にのみ動作します。
- z-indexを設定する。-1 を設定すると、本質的に現在の dom のカスケードコンテキストが変更され、非表示にする目的で他の要素の下に置かれることになります。
- 他のレイヤーレイアウトに影響を与えない部分的な配置換え
- 他の要素によって一部が隠され、上の要素にpointer-events:none;が設定されていてclick toが設定されていても、イベントに反応しない(注:このプロパティは継承されます)。
ちょっとした実験
自分で試して遊ぶことができる
// html
<div class="container">
<div class="target">
<p>I am target, and you ? </p>
</div>
</div>
// css
<style>
.container{
margin: 0 auto;
width: 500px;
min-height: 30px;
background-color: skyblue;
}
.target{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 auto;
background-color: plum;
color: #fff;
transition: all linear 1s;
cursor: pointer;
}
.clickBlock{
display: none;
}
.clickVisibility{
visibility: hidden;
}
.clickOpacity{
opacity: 0;
}
.clickRgba{
background-color: rgba(221, 160, 221, 0);
}
.clickZindex{
z-index: -1;
position: absolute;
}
</style>
// js
const _target = document.getElementsByClassName("target")[0];
_target.onclick = (() => {
let i = 1; // click number of times
return () => {
// _target.attributes.class.value += " clickBlock";
// _target.attributes.class.value += " clickVisibility";
// _target.attributes.class.value += " clickOpacity";
// _target.attributes.class.value += " clickRgba";
_target.attributes.class.value += " clickZindex";
console.log(`${i}th click`);
i++;
}})();
cssのDisplay、Visibility、Opacityの違いについてはこの記事が全てです、より関連するcss control hidden contentはスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします!(`・ω・´)
関連
-
[CSSチュートリアル】Chromeのタブバーを実装するためのCSSのコツ
-
[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ
-
[CSSチュートリアル】CSSで炎のエフェクトを記述する方法
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード
-
[CSSチュートリアル]css transform ページめくりアニメーションの記録
-
[CSSチュートリアル】SCSS50%スタイルコード削減のための14の実践レッスン
-
[CSSチュートリアル]cssで背景画像の上にテキストを実現する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
cssにおけるpx, em, rem, ptの特徴や違い、変換の詳細について
-
[css3]CSS3:overflowプロパティ
-
[css3】cssのmarginとvertical marginの重なりの値について
-
[CSSチュートリアル】css3 背景画像 半透明 コンテンツ 不透明 方法例