ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくあります。 <スタイル> .d1{ 表示: なし; } .d2{ 可視性: 可視; } .d3{ 不透明度: 0; } </スタイル> <div class="d1" onclick="clickEvent('display: none;')"></div> <div class="d2" onclick="clickEvent('visibility: hidden;')"></div> <div class="d3" onclick="clickEvent('不透明度: 0;')"></div> <script type="text/javascript"> 関数 clickEvent(type){ アラート(タイプ) } </スクリプト> 表示: なし;
可視性: 非表示;
不透明度: 0;
rgb
Zインデックス: -1
ちょっとした実験 ぜひご自身で試してプレイしてみてください。 //html <div class="コンテナ"> <div class="target"> <p>私はターゲットです、あなたは?</p> </div> </div> // css <スタイル> 。容器{ マージン: 0 自動; 幅: 500ピクセル; 最小高さ: 30px; 背景色: スカイブルー; } 。ターゲット{ 幅: 200ピクセル; 高さ: 50px; 行の高さ: 50px; テキスト配置: 中央; マージン: 0 自動; 背景色: プラム; 色: #fff; 遷移: すべて線形 1; カーソル: ポインタ; } .クリックブロック{ 表示: なし; } .クリック可視性{ 可視性: 非表示; } .clickOpacity{ 不透明度: 0; } .clickRgba{ 背景色: rgba(221, 160, 221, 0); } .clickZindex{ Zインデックス: -1; 位置: 絶対; } </スタイル> // js _target は、 document.getElementsByClassName("target")[0] に格納されます。 _target.onclick = (() => { let i = 1; // クリック回数 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} 番目のクリック`); 私は++; }})(); CSS の Display、Visibility、Opacity の違いについての記事はこれで終わりです。非表示のコンテンツを制御する CSS の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: HTML 名、ID、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。
サーバーに複数のサイトを展開するには、異なるサイトにアクセスするために複数のポートを開く必要がありま...
最近、次のデータ型のデータベースに遭遇しました:decimal(14,4)発生した問題は次のとおりで...
インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...
この記事では、Docker で新しいイメージを手動で構築する方法を紹介し、皆さんと共有します。詳細は...
目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...
前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...
この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...
背景: Linux サーバーのファイルのアップロードとダウンロード。 XShell+Xftp インス...
この記事では、MySQL 8.0.15 winx64 圧縮パッケージのインストールと設定方法を参考ま...
CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...
目次1. オブジェクトのプロパティ1.1 属性表記2. プロパティ名を計算する3.オブジェクトメソッ...
この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...
環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...
1. CSSを通す必要がある背景CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウス...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...