JSの3人の将軍（オフセット/クライアント/スクロール）
通常、JSを作成するとき、offset、scroll、clientの3つのキーワードに遭遇することが多いので、今日はこれら3つのキーワードを別々に取り出します。
最初に2枚の写真から始めましょう、そしてあなたは後でよく成長します！
オフセット（要素オフセット）
- オフセット関連の属性は、要素の位置（オフセット）、サイズ（高さと幅）、およびその他の値を動的に取得できます。
注意：
- オフセットによって返されるデータはすべて、単位のない数値タイプです
オフセット関連属性の使用
| オフセット関連属性 | 得られたデータ |
|---|---|
| offsetParent | 配置された親要素を返します。親要素が配置されていない場合は、本体が返されます。 |
| offsetTop | 配置された親要素の上部に対する要素のオフセットを返します |
| offsetLeft | ポジショニングを使用して、親要素の左側を基準にした要素のオフセットを返します |
| offsetWidth | パディング（内側の余白）、境界線（境界線）、コンテンツ領域の幅を含む要素自体を返します |
| offsetHeight | パディング（内側のマージン）、境界線（境界線）、コンテンツ領域の高さを含む要素自体を返します |
現時点では、一部の人が質問するので、オフセットとスタイルは要素の位置とサイズを表すことができますが、2つの違いは何ですか？
オフセット
-
任意のスタイルシートでスタイル値を取得できます
-
オフセットで得られる値には単位がありません
-
offsetWidthとoffsetHeightのサイズは次のとおりです：padding + border + content size
-
offsetWidthなどの属性は読み取り専用の属性であり、データを設定することはできません
スタイル
-
インラインスタイルシートのスタイル値のみを取得できます
-
style.widthとstyle.heightは、単位付きの文字列を取得します
-
style.widthとstyle.heightは、パディングとボーダーを含まない値を取得します
-
style.widthとstyle.heightは読み取りと書き込みが可能な属性であり、値を取得したり値を設定したりできます
総括する
-
オフセットを使用して、要素の位置とサイズを読み取ります
-
要素の値を設定または変更するときは、スタイル設定を使用してください
クライアント（要素の視覚野）
-
クライアントとは、クライアントの可視領域を指します。
-
クライアントの関連する属性を使用して、要素の視覚野に関する情報を取得します。
-
要素の境界線サイズと要素サイズは、クライアントの関連する属性を介して動的に取得できます
クライアント関連の属性の使用
| クライアント関連の属性 | 得られたデータ |
|---|---|
| clientTop | 要素の上部境界線のサイズを取得します |
| clientLeft | 要素の左境界線のサイズを取得します |
| clientWidth | 要素自体のパディングと境界線を除くコンテンツ領域の幅を返し、単位なしでデータを返します |
| clientHeight | 要素自体のパディングと境界線を除くコンテンツ領域の高さを返し、単位なしでデータを返します |
スクロール（要素のスクロール距離）
-
スクロールは、ページのスクロールを制御できます。
-
スクロール関連の属性を使用して、要素のサイズ、スクロール距離などを動的に取得します。
スクロール関連のプロパティの使用
| 関連するプロパティをスクロールする | 得られたデータ |
|---|---|
| scrollTop | 要素が上側に回転する距離を返します |
| scrollLeft | 要素が左に回転する距離を返します |
| scrollWidth | 境界線を除く、それ自体の実際の幅を返します |
| scrollHeight | 境界線を除く、それ自体の実際の高さを返します |
これを見て、誰もが心の中で質問をするだろうと思います。つまり、ページのどの部分が関係しているのでしょうか。
-
ブラウザの高さまたは幅がページ全体を表示するのに十分でない場合、スクロールバーがページに自動的に表示されます
-
スクロールバーを特定の方向にスクロールすると、ページは徐々に反対方向に非表示になります。非表示のページの高さまたは幅は、スクロールされるページの一部です。onscrollイベントは、ページのスクロール時にトリガーされます。バーがスクロールされます。
スクロール互換性ソリューション
- ロールアップされるページのプロパティには互換性の問題があります。pageYOffsetおよびpageXOffsetプロパティは、IE9以降でのみ使用できます。
function Scroll(){
this.left=(window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0);
this.top=(window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0);
}
3つは要約します
- オフセットは、要素の位置を取得するためによく使用されます
- クライアントは、要素のサイズを取得するためによく使用されます
- スクロールは、要素のスクロール距離を取得するためによく使用されます
三大将注意点
offsetWidth（offsetHeight）
- offsetWidth（offsetHeight）= padding（inner margin）+ border（border）+ content width and height（戻り値（単位なし））
clientWidth（clientHeight）
- clientWidth（clientHeight）=パディング（内側の余白）+コンテンツの幅と高さ（境界線を除く）
scrollWidth（scrollHeight）
- scrollWidth（scrollHeight）=境界を含まない、それ自体の実際の幅。実際の幅には、ロールアウトされた部分が含まれます。
開発後、戦いましょう！
ネイティブJSは虫眼鏡効果を実現します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#div {
width: 400px;
height: 600px;
background: url(../img/123.jpg) no-repeat;
background-size: 100%;
}
li {
float: left;
width: 100px;
height: 150px;
}
ul {
list-style: none;
}
.img {
width: 100px;
height: 150px;
}
.zz {
position: relative;
width: 200px;
height: 200px;
background-color: rgba(0, 666, 666, .3);
}
.fa {
position: absolute;
left: 400px;
top: 0;
background: url(../img/456.jpg) no-repeat;
background-size: 800px 1200px;
background-position: 0px 0px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="div">
<div class="zz"></div>
</div>
<div class="fa"></div>
<ul>
<li>
<img class="img" src="../img/123.jpg">
</li>
<li>
<img class="img" src="../img/仓鼠飞轮.jpg">
</li>
<li>
<img class="img" src="../img/刚涂.jpg">
</li>
<li>
<img class="img" src="../img/呱.jpg">
</li>
</ul>
<script>
window.onload = function () {
var div = document.querySelector("#div");
var img = document.querySelectorAll(".img");
var zz = document.querySelector(".zz");
var fa = document.querySelector(".fa");
var i = document.querySelector(".i");
div.onmouseover = function () {
zz.style.display = "block";
fa.style.display = "block";
}
div.onmouseout = function () {
zz.style.display = "none";
fa.style.display = "none";
}
for (i = 0; i < img.length; i++) {
img[i].onclick = function () {
div.style.background = `url(${
this.src}) no-repeat`;
div.style.backgroundSize = "100%";
fa.style.background = `url(${
this.src}) no-repeat`;
fa.style.backgroundSize = "800px 1200px";
}
}
div.onmousemove = function (e) {
var left = e.pageX - div.offsetLeft - zz.offsetWidth / 2;
var top = e.pageY - div.offsetTop - zz.offsetHeight / 2;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
if (left > div.offsetWidth - zz.offsetWidth) {
left = div.offsetWidth - zz.offsetWidth;
}
if (top > div.offsetHeight - zz.offsetHeight) {
top = div.offsetHeight - zz.offsetHeight;
}
zz.style.left = left + "px";
zz.style.top = top + "px";
var x = left * 2;
var y = top * 2;
fa.style.backgroundPosition = `${
-x}px ${
-y}px`;
}
}
</script>
</body>
</html>