ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくあります。 <スタイル> .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、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。
MySQL 5.7 を新しくインストールしました。ログインすると、パスワードが間違っているというメッ...
1. 現在の日付 DATE_SUB(curdate(),INTERVAL 0 DAY) を選択します...
この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...
MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....
1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...
目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...
目次間違い1: データの列が多すぎる誤解2: 共同クエリが多すぎる誤解3: ENUMの代わりにSET...
この記事は、「1 分でインデックス作成スキルを学ぶ」という宿題から生まれました。注文ビジネス テーブ...
MVCC MVCC (Multi-Version Concurrency Control) は、マル...
1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...
<br />国内のウェブサイトが本格的に普及し、ユーザーエクスペリエンスに重点が置かれる...
1. Tomcatサービスが開いていませんブラウザのアドレスバーにlocalhost:8080と入力...
序文:年末です。データベースを検査する時期ではないでしょうか?一般的に、検査では、パスワードの複雑さ...
私は長い間問題に取り組み、文法上の問題を何度も確認しました。しかし、後でネットで調べてみたら、突然理...
目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...