DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロールバーの表示、div の非表示、イベントバブリングの無効化など)

最も一般的に使用されるレイアウト要素として、DIV は Web 開発において重要な役割を果たします。 DIV を使用する際に遭遇したさまざまな操作の概要を以下に示します。
1.div はスクロールバーを表示します<br />これは非常に一般的なタスクであり、スクロールバーは基本的に CSS を通じて実装されます。
（１）垂直スクロールバーの設定スクロールバーを表示するかどうかは、主にCSSで以下のプロパティを設定します。

コードをコピー

コードは次のとおりです。

オーバーフロー: 表示|自動|非表示|スクロール
オーバーフローx: 水平スクロールバー
overflow-y: 垂直スクロールバー

パラメータの意味:
visible: コンテンツをクリップせず、スクロールバーも追加しません。このデフォルトが明示的に指定されている場合、オブジェクトは、オブジェクトを含むウィンドウまたはフレームのサイズにクリップされます。また、クリッププロパティの設定は無効になります。
auto: これは body オブジェクトと textarea のデフォルト値です。コンテンツをクリップし、必要に応じてスクロールバーを追加します
非表示: オブジェクトのサイズを超えるコンテンツを表示しない
スクロール: 常にスクロールバーを表示する
overflow:auto; これは、コンテンツが div の高さを超えると、垂直スクロールバーが表示されることを意味します。したがって、必要に応じて垂直スクロールバーを表示する必要があります。これは次のように実現できます。

コードをコピー

コードは次のとおりです。

<divstyle="overflow:auto;">...</div>

または

コードをコピー

コードは次のとおりです。

<divstyle="overflow-y:auto;">...</div>

（２）水平スクロールバー水平スクロールバーのみを表示したい場合は、通常、改行を無効にする設定を使用する必要があります。例：

コードをコピー

コードは次のとおりです。

<divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>

（３）IEのスクロールバーの外観は主にさまざまな色属性を使用します。

コードをコピー

コードは次のとおりです。

scrollbar-3dlight-color:color; スクロールバーのライト境界線の色を設定または取得します。
scrollbar-highlight-color:color; スクロールバーの 3D インターフェイスの明るいエッジの色を設定または取得します。
scrollbar-face-color:color; スクロールバーの 3D サーフェスの色を設定または取得します。
scrollbar-arrow-color:color; スクロールバーの方向矢印の色を設定または取得します。スクロールバーが表示されているが使用できない場合、このプロパティは無効です。
scrollbar-shadow-color:color; スクロールバーの 3D インターフェイスの暗いエッジの色を設定または取得します。
scrollbar-darkshadow-color:color; スクロールバーの暗い境界線の色を設定または取得します。
scrollbar-base-color:color; スクロールバーの基本色を設定または取得します。他のインターフェースの色もそれに応じて自動的に調整されます。
scrollbar-track-color:color; スクロールバーのドラッグ領域の色を設定または取得します

Chrome では、基本的に Webkit 固有のプロパティを使用して設定されます。

コードをコピー

コードは次のとおりです。

::-webkit-スクロールバー-トラックピース{
background-color:#fff;/*スクロールバーの背景色*/
-webkit-border-radius:0;/*スクロールバーの角丸の幅*/
}
::-webkit-スクロールバー{
width:8px;/*スクロールバーの幅*/
height:8px;/*スクロールバーの高さ*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直スクロールバーのスタイル*/
高さ:50px;
背景色:#999;
-webkit-border-radius:4px;
アウトライン:2pxsolid#fff;
アウトラインオフセット:-2px;
境界線:2pxsolid#fff;
}
::-webkit-scrollbar-thumb:hover{/*スクロールバーのホバースタイル*/
高さ:50px;
背景色:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平スクロールバーのスタイル*/
幅:5px;
背景色:#CCCCCC;
-webkit-border-radius:6px;
}

2. div イベントのバブリングを無効にする<br />これは基本的に、IE を除いて、標準の event.stopPropagation() メソッドを使用してイベントのバブリングを防止します。

コードをコピー

コードは次のとおりです。

functionBigDiv(イベント){
イベントが伝播を停止する場合
event.stopPropagation(); //FirefoxカーネルベースのブラウザでstopPropagationをサポート
}それ以外{
event.cancelBubble=true; //IE をベースに記述
}
//その他のコード...
}

3. div がデフォルトの動作を実行しないようにする<br />これは実際にはよくある問題です。送信ボタンの送信フォームの動作、<a> 要素のハイパーリンクの動作など、デフォルトの動作を持つ要素の場合、これらの要素にイベントを適用すると、デフォルトの動作をキャンセルする必要が生じることがよくあります。これは、イベントコールバック関数で event.preventDefault() を呼び出すことによって実現されます。
4. divの位置を動的に計算する（divポップアップレイヤーの位置の一般的な計算など）
（１）DOM属性方式
offsetTop: 現在のオブジェクトからその親レイヤーの上端までの距離。値を割り当てることはできません。オブジェクトから親オブジェクトの上端までの距離を設定するには、style.top プロパティを使用します。
offsetLeft: 現在のオブジェクトからその親レイヤーの左側までの距離。値を割り当てることはできません。オブジェクトから親オブジェクトの左側までの距離を設定するには、style.left プロパティを使用します。
ここでは、 offsetTop と style.top の違いに注意する必要があります ( offsetLeft と style.left についても同様です)。
•OffsetTop は数値を返しますが、style.top は数値に加えて単位 px を含む文字列を返します。通常、これを数値に変換するには parseInt が必要です。
• offsetTop は読み取り専用ですが、style.top は読み取り/書き込み可能です。
•HTML 要素にトップスタイルが指定されていない場合、style.top は空の文字列を返します。
注意: Firefox では、style.top に値を割り当てる場合、その値も文字列形式 (px 付き) にする必要があります。
（２）CSSにおける位置属性の位置への影響
位置のデフォルトのプロパティ値は静的です。しかし、位置において最も重要な属性値は相対的と絶対的です。
多くの場合、絶対属性を left および top と組み合わせて、関連する「フローティングレイヤー」効果を作成します。ただし、ウィンドウではなくコンテナーにフローティング効果が必要な場合もあります。このとき、高さと幅を計算するのは面倒なだけでなく、完璧な効果を達成するのはほぼ不可能です。実際、必要なのは、前のレベルのスタイル属性の位置を相対的に設定するだけです。つまり、位置属性値の効果は、コンテナスタイルの位置属性値によって直接影響を受けます。例えば、次のネスト構造AB

コードをコピー

コードは次のとおりです。

<div="A">
<div="B">
</div>
</div>

A の位置が相対的である場合、B の位置は絶対的です。この時点で、left:0 と top:0 はウィンドウドキュメントではなく、ID A の div をターゲットにしています。ただし、A で padding="50px" を設定すると、位置が absolute に設定されていない A 内の他の要素は A の padding 値によって変更されますが、B の位置は親レベルに対して相対的であるため変更されません。
ここでは、位置の 4 つの属性値 (相対、絶対、固定、静的) について簡単に説明します。上記のコードを例に挙げてみましょう。
相対的
相対値は、要素が自身の位置に対してオフセットされていることを意味します。たとえば、上記のコードで、B が相対値に設定されている場合、次の CSS コードを設定します。

コードをコピー

コードは次のとおりです。

#B{
位置:相対;
パディング:5px;
上:5px;
左:5px;
}

これを次のように理解することができます。相対属性が設定されていない場合、B の位置は通常のドキュメントフローに従って特定の位置にある必要があります。しかし、Bの位置を相対的に設定すると、あるべき位置に応じて上、右、下、左の値に応じてオフセットされます。ここで、relativeの「相対的」の意味が反映されます。
注: 相対オフセットは、オブジェクトの余白の左上を基準とします。
絶対
この属性は常に誤解を招きます。 position 属性が absolute に設定されている場合、常にブラウザウィンドウに従って配置されるというのは誤りです。実はこれが固定属性の特徴なのです。
B の位置が絶対に設定されている場合、オフセットの対象は誰ですか?ここでは 2 つの状況があります。
•B の親オブジェクト (または親オブジェクトである限り、その親) の親も位置属性を設定し、位置属性の値が絶対または相対である場合、つまりデフォルト値ではない場合は、B はこの親に従って配置されます。
•Bに位置属性を持つ親オブジェクトがない場合、bodyが配置オブジェクトとして使用され、ブラウザウィンドウに応じて配置されます。これは比較的理解しやすいです。
修理済み
fixed は absolute の特殊なタイプです。つまり、fixed は常に body を配置オブジェクトとして受け取り、ブラウザウィンドウに従って配置されます。
静的
position 属性が設定されていない場合、position のデフォルト値は、通常のドキュメントフローに従って要素を配置することです。
（3）JQueryプロンプトポップアップボックスは一般的な方法です。このタスクで最も重要なことは、ポップアップボックスの位置を計算することです。イベントソースはイベントオブジェクトを通じて取得され、offset() 関数を使用してドキュメントに対するイベントソースの位置を計算できます。

コードをコピー

コードは次のとおりです。

vartop=$(event.target).offset().top;
varleft=$(event.target).offset().left;

ポップアップレイヤーはドキュメント、つまりページの左上隅を基準とするため、Body 要素の最初のレイヤーに配置する必要があります。つまり、親クラスは body です。他の要素に含まれている場合は、親クラスの位置スタイルが相対的に設定されていることを確認する必要があります。計算された上と左はイベントソースの位置です。この位置で表示すると、イベントソースオブジェクトが隠れてしまいます。したがって、通常は、top+20 などの手動オフセットを行う必要があります。
5. div要素を非表示にする
CSS で要素を非表示にする方法は、display:none と visibility:hidden の 2 つがあります。 2 つの方法の違いは、表示値を設定すると要素が完全に非表示になり、要素が占めていたスペースが消え、下の要素が上に移動することです。可視性を設定すると、要素が占める位置はそのまま残りますが、非表示になります。
6. div の子要素の水平方向と垂直方向の配置は、 float 属性を使用して制御されます。デフォルトでは、div は垂直に配置され、幅は 100% です。CSS で float:left を設定すると、水平になります。水平行を途中で分割し、残りを垂直行に復元する場合は、clear:both 変更を使用する必要があります。次の例を見てください。

コードをコピー

コードは次のとおりです。

<div>
<divstyle="float:left">ああああああ</div>
<divstyle="float:left">bbbbbbbbbbbbbb</div>
上記の 2 つの div は水平に配置されています。
<divstyle="clear:both"></div>これは非常に重要です。上位 2 つのレイヤーのフロートをクリアし、下位のレイヤーが垂直に配置され続けることを意味します。
<div>このレイヤーは垂直に配置されています</div>
<div>このレイヤーは垂直に配置されています</div>
</div>

上記は float プロパティの単純な適用例です。
float 属性は主に、要素のフロー方向、つまり右に移動するべきか左に移動するべきかを制御するために使用されます。 float プロパティの構文は次のとおりです。

コードをコピー

コードは次のとおりです。

フロート:なし|左|右
none: デフォルト値。物体は浮かばない
左: テキストはオブジェクトの右側に流れます
右: テキストはオブジェクトの左側に流れます

特定の効果を実現するには、通常、他のオブジェクトに影響を与えないように、ある時点でフローティングをキャンセルする必要があります。これは、上で紹介した clear プロパティによって実現されます。
clear プロパティには 4 つの値があります。

コードをコピー

コードは次のとおりです。

クリア:両方|左|右|なし;

簡単に言えば、clear 属性の機能はフロートを「クリア」することです。要素に clear:left; が設定されている場合、要素の左側にフローティング要素がないことを意味します。同様に、 clear:right; は要素の右側にフローティング要素がないことを意味します。 clear:both; は要素の両側にフローティング要素がないことを意味します。 clear:none は、両側にフローティング要素が許可されることを意味します。
7. div 内のテキストのフォントを設定する<br />まず、CSS でテキストを制御する属性のリストを確認します。

コードをコピー

コードは次のとおりです。

上記から、テキスト間隔、文字間隔、装飾、配置、インデント、行の高さなどのテキストプロパティをここで定義できることがわかります。例を見てみましょう:

コードをコピー

コードは次のとおりです。

<pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height：17pt">テキスト属性が処理された後、単語間のスペースが広がり、行間の行の高さが広がり、配置が両端揃えになり、段落の先頭がさらに 2 つのスペース分インデントされていることがわかります。 </p>

letter-spacing は文字間隔を 5px に設定します (5px は長さの単位)。text-align は配置を両端揃えに設定します。indent はインデントを 4em に設定します。line-height は行の高さを 17pt に設定します。上記の例から、CSS テキスト属性を使用すると、ページ上のテキストを簡単にタイプセットできることがわかります。
行間隔はフォントサイズによって異なります。一般的に、フォントが小さいほど、読みやすくするために行間隔を大きくする必要があります。Web ページで中国語フォントの行間隔設定がない場合、長い段落のテキストを読んでいる読者にとっては悲惨なことになるため、行の高さを適切に設定することが非常に重要です。一般的に、Web デザインでは行の高さはフォントサイズの 1.5 ～ 2 倍にする必要があります。 Word などのテキスト編集ソフトウェアでは、通常、フォントの 120% がデフォルトの行間隔として設定されています。 CSS の行の高さ設定は均等に分割され、各行の上部と下部に追加されます。つまり、行の高さが 20 ピクセルに設定されている場合、テキストの各行の上下に 10 ピクセルのスペースが確保されます。
8. div のツールチップを別の行で表示するように設定する<br />HTML では、リンクや画像に title 属性を追加して説明文を表示することができます。通常、これらのテキストは 1 行で表示されますが、複数行で表示する方法はありますか?解決策は2つあります。
（１）タイトル属性を複数行で記述します。例：

コードをコピー

コードは次のとおりです。

<ahref=#"title="説明 1説明 2説明 3">ウェブサイト構築</a>

（２）最初の行は直感的ではありません。改行が必要な箇所に
（&は半角）またはを追加して、次の結果を実現することもできます。

コードをコピー

コードは次のとおりです。

<ahref=#"title="説明 1
説明 2
説明 3">ウェブサイト構築</a>
<ahref=#"title="説明 1説明 2説明 3">ウェブサイト構築</a>

9. マウスの中ボタンを使用して水平スクロールバーを制御する<br />Chrome と FireFox では、通常、マウスの中ボタンは垂直スクロールバーを制御するために使用されます。DIV に水平コントロールバーしかない場合、マウスの中ボタンではデフォルトではスクロールしません。この場合は、自分で実装する必要があります。
まず、マウスホイールイベントをフックします。

コードをコピー

コードは次のとおりです。

//非FireFoxのマウスホイールイベント
element.onmousewheel=要素がスクロールされる。
//FireFox のマウスホイールイベント
element.addEventListener('DOMMouseScroll',fireElementScrolled,false);

ここでの Firefox の特別な点は、addEventListener を使用して接続する必要があることです。
次に、fireElementScrolled メソッドを実装します。

コードをコピー

コードは次のとおりです。

fireElementScrolled = 関数 (イベント) {
varrolled=0;
イベントホイールデルタの場合
ロールされた=event.wheelDelta;
}
それ以外{
//Firefox: 処理する必要がある
ロールされた=-イベントの詳細*30;
}
varhtmlElement=document.getElementById('テスト');
htmlElement.scrollLeft=htmlElement.scrollLeft をロールバックします。
イベントをデフォルトにしない();
falseを返します。
};

原理は非常にシンプルで、スクロールホイールのスクロール距離を取得し、div 要素の scrollLeft 属性に値を割り当てます。
10. 子要素を中央揃えにする
(1) 水平方向の中央揃え通常のテキストや画像を中央揃えにするのは簡単です。親コンテナの CSS スタイルに text-align:center; を含めるように設定するだけです。
子要素が DIV またはその他の要素の場合、状況は少し複雑になります。div を例に挙げます。子 div が 1 つしかない場合は、子要素の CSS スタイルに margin:0auto; を含めるように設定することで、中央揃えを実現できます。たとえば、次の例をご覧ください。

コードをコピー

コードは次のとおりです。

<divid="a" style="width:400px;height:300px;border:1pxsolidgreen;">
<divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">単純なサブ DIV の中央揃えの問題</div>
</div>

子要素が複数ある場合は、通常、div の追加レイヤーを追加してこれを実現します。例を参照してください。

コードをコピー

コードは次のとおりです。

<divstyle="幅:400px;高さ:300px;境界線:1pxsolidred;">
<divstyle="margin:0auto;position:relative;left:50%;float:left;">
<divstyle="位置:相対;左:-50%;フロート:左">
<divstyle="border:1pxsolidblue;text-align:center;">1</div>
<divstyle="border:1pxsolidblue;text-align:center;">2</div>
<divstyle="border:1pxsolidblue;text-align:center;">3</div>
<divstyle="border:1pxsolidblue;float:left;">4</div>
<divstyle="border:1pxsolidblue;float:left;">5</div>
<divstyle="border:1pxsolidblue;float:left;">6</div>
</div>
</div>
</div>

（２）垂直方向のセンタリング垂直方向のセンタリングは少し面倒ですが、水平方向と垂直方向のセンタリングを同時に実現できる非常に簡単な方法があります。まず、親要素に対してposition:relativeを記述します。これは、子要素にposition:absoluteを記述した場合に、外側に配置されないようにするためです。次に、子要素の高さと幅を記述します。一部のブラウザでは、この 2 つの値がないと解析時に予期しない位置ずれが発生します。次に、メソッド全体の核心部分です。子要素に top: 50%、left: 50% と margin-top: に高さの半分の値の負の数、margin-left: に重みの半分の値の負の数を指定します。もちろん、親要素の幅と高さも最初に記述する必要があります。例をご覧ください:

コードをコピー

コードは次のとおりです。

<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">センタリング方法</div>

<<: HTMLにビデオを挿入してすべてのブラウザと互換性を持たせる方法

>>: 動的な色切り替えの実装コードをサポートするために、CSS で SVG 画像を参照します。