フロントエンドのゴシップ (6)_html/css_WEB-ITnose

カーソル効果がありませんか?

このページでは、css の 'cursor' 属性を使用して画面上のカーソルのスタイルを定義できます。一般的に、カーソルが指定された要素の上にある限り、そのスタイルは指定どおりに表示されます。しかし、指定した要素が他の要素によって「覆われている」場合はどうなるでしょうか。次のデモを見てみましょう:

デモ

div1 のカーソル スタイルをカスタマイズしましたが、div2 でカバーされる部分では、プリセット エフェクトが消えているか、このエフェクトが「貫通」できないことがわかります。ディビジョン2。また、これは、一部の操作 (ドラッグなど) でカーソル スタイルのカスタマイズが必要な場合、要素間の積み重ね順序に注意を払う必要があることを思い出させます。そうしないと、特定の場所に移動したときにカーソルが表示される可能性が高くなります。カーソル効果が突然消えます。

CSS 自体が要素間の重なり順をどのように決定するかについては、まだ比較的複雑な問題です。詳しくは、Zhang Xinxu によるこの記事をご覧ください。

js の要素の幅と高さの属性を取得するいくつかの方法の比較

offsetWidth、clientWidth、scrollWidth、offsetHeight、clientHeight、scrollHeight のこれらの属性の特徴を今回は明確にしてみましょう。まずデモを見てみましょう:

デモ

まず、スクロールされる 2 つの通常の要素 div1 と div2 の状況を分析しましょう。上記のデモをさまざまなブラウザー (IE8 に関係なく) で実行した後、それぞれを で確認できます。ブラウザの結果は同じです:

結論としては:

offsetWidth 属性と offsetHeight 属性: 値は、幅、高さ、要素の表示幅と高さに対応します。パディング、要素自体の（スクロール バー付き）（時間）スクロール バー、境界線。
clientHeight 属性と clientWidth 属性: 値は、要素のコンテンツとパディングが占める視覚領域に対応します。スクロール バーがある場合は、境界線を除いてスクロール バーを追加する必要があります。
scrollHeight 属性とscrollWidth 属性: div1 の結果からわかるように、スクロール バーがない場合の実行結果は clientHeight および clientWidth と同じです。スクロール バーの状況はもう少し複雑です。上記の例では、div2 のコンテンツがスクロールを発生させるのに十分な大きさであるため、スクロールが発生できなくなるまでコンテンツ div のサイズが縮小されます。 clientHeight と同じである必要があります。 clientWidth も同じです。
上記の結論は、ページの通常の要素にのみ適用されます (html 要素、ここでは document.documentElement を使用してアクセスします)。明らかなパターンはありません。 . 検索 さまざまなデータにはさまざまな意見があり、テストの結果を説明できません。参考までに、私のテスト後に比較的修正された結果をいくつか示します。

まず第一に、clientHeight と clientWidth は、すべてのブラウザで通常の要素とは異なる動作をし、基本的にページのビューポートのサイズを参照します。
スクロールハイトとスクロール幅は、スクロールがあるかどうかに分割する必要があります。スクロールがある場合はページ コンテンツ全体のサイズを指します。スクロールがない場合は、クロムのビューポートのサイズを指します。 IE および FF では、offsetWidth および offsetHeight と同じです。
offsetWidth 属性と offsetHeight 属性は、以前と同様に、Chrome、FF、IE11 での要素全体の表示幅と高さを参照します。