element.style

style要素は、属性値1対1に対応します.
cssは通常の文章を使用するが,styleに対応する属性はcamelCaseを使用する.

background-color  => elem.style.backgroundColor
z-index           => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth

getComputedStyle

const section1 = document.body.querySelector('#section--1');
console.log(getComputedStyle(section1));
console.log(getComputedStyle(section1).margin);
console.log(getComputedStyle(section1).color);
/*
CSSStyleDeclaration {0: "align-content", 1: "align-items", 2: "align-self", 3: "alignment-baseline", 4: "animation-delay", 5: "animation-direction", 6: "animation-duration", 7: "animation-fill-mode", 8: "animation-iteration-count", 9: "animation-name", 10: "animation-play-state", 11: "animation-timing-function", 12: "appearance", 13: "backdrop-filter", 14: "backface-visibility", 15: "background-attachment", 16: "background-blend-mode", 17: "background-clip", 18: "background-color", 19: "background-image", 20: "background-origin", 21: "background-position", 22: "background-repeat", 23: "background-size", 24: "baseline-shift", 25: "block-size", 26: "border-block-end-color", 27: "border-block-end-style", 28: "border-block-end-width", 29: "border-block-start-color", 30: "border-block-start-style", 31: "border-block-start-width", 32: "border-bottom-color", 33: "border-bottom-left-radius", 34: "border-bottom-right-radius", 35: "border-bottom-style", 36: "border-bottom-width", 37: "border-collapse", 38: "border-end-end-radius", 39: "border-end-start-radius", 40: "border-image-outset", 41: "border-image-repeat", 42: "border-image-slice", 43: "border-image-source", 44: "border-image-width", 45: "border-inline-end-color", 46: "border-inline-end-style", 47: "border-inline-end-width", 48: "border-inline-start-color", 49: "border-inline-start-style", 50: "border-inline-start-width", 51: "border-left-color", 52: "border-left-style", 53: "border-left-width", 54: "border-right-color", 55: "border-right-style", 56: "border-right-width", 57: "border-start-end-radius", 58: "border-start-start-radius", 59: "border-top-color", 60: "border-top-left-radius", 61: "border-top-right-radius", 62: "border-top-style", 63: "border-top-width", 64: "bottom", 65: "box-shadow", 66: "box-sizing", 67: "break-after", 68: "break-before", 69: "break-inside", 70: "buffered-rendering", 71: "caption-side", 72: "caret-color", 73: "clear", 74: "clip", 75: "clip-path", 76: "clip-rule", 77: "color", 78: "color-interpolation", 79: "color-interpolation-filters", 80: "color-rendering", 81: "column-count", 82: "column-gap", 83: "column-rule-color", 84: "column-rule-style", 85: "column-rule-width", 86: "column-span", 87: "column-width", 88: "content", 89: "cursor", 90: "cx", 91: "cy", 92: "d", 93: "direction", 94: "display", 95: "dominant-baseline", 96: "empty-cells", 97: "fill", 98: "fill-opacity", 99: "fill-rule", …}*/

// 0px
// rgb(68, 68, 68)

これにより、要素が持つスタイルがオブジェクトに返され、スタイルのプロパティがオブジェクトのpropertyとしてアクセスされると、プロパティ値が文字列に返されます.

elem.style.setProperty()

elem.style.setProperty(property, value);

section1.style.color = 'orange';
const section1Style = getComputedStyle(section1);
console.log(section1Style.color);
section1.style.setProperty('color', 'blue');
console.log(section1Style.color);

この関数はelem.style.property = value;に等しい.

classList Crud

elem.classList.add("class") – class를 추가
elem.classList.remove("class") - class를 제거
elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환

classもプロパティなので、elem.className = 'something'に変更できます.しかし、あなたは絶対にこのような方法を取ってはいけません.これはクラス全体を削除して再割り当てする方法です.したがって、上記のようにclassListとする.add()関数を使用する必要があります.

getBoundingClientRect()

const logo = document.querySelector('.nav__logo');
console.log(logo.getBoundingClientRect());
/*
DOMRect
{
    "x": 90,
    "y": -3.5,
    "width": 148.578125,
    "height": 45,
    "top": -3.5,
    "right": 238.578125,
    "bottom": 41.5,
    "left": 90
}
*/

上記のコードはDOMの現在の状態と状態を詳細に説明している.

Scroll

スクロールは、現在のウィンドウがモニタウィンドウより大きい場合に実行されます.
ウィンドウ内でスクロールを実行するのに役立つツールがあります.これらの方法は関連しています.

pageXOffset, pageYOffset

画面が現在指している場所を示します.
ユーザ画面の左上隅に対する現在位置とします.
この属性は、他の名前scrollXおよびscrollYとしても使用できます.

console.log(window.pageXOffset, window.pageYOffset); // 0 642
console.log(window.scrollX, window.scrollY); // 0 642

document.documentElement.clientWindth/clientHeight

console.log(
  document.documentElement.clientHeight,
  document.documentElement.clientWidth
);// 614 1440

現在のユーザーが表示しているWebウィンドウのサイズを表示します.

window.scrollTo(left, top)

const section1 = document.querySelector('#section--1');
const section1Locate = section1.getBoundingClientRect();

const btn = document.querySelector('.btn--scroll-to');
btn.addEventListener('click', () => {
  window.scrollTo(section1Locate.left, section1Locate.top);
});

ユーザーの画面をユーザーの画面の一番左上に移動します.
つまり、スクロールします.ユーザの現在の状態の画面を基準とする.したがって、現在の画面ステータス

window.scrollTo({left: ,top: ,behavior: })

console.log(window.scrollX, window.scrollY);
btn.addEventListener('click', function () {
  window.scrollTo({
    left: section1Locate.left,
    top: section1Locate.top,
    behavior: 'smooth',
  });
  //console.log(window.scrollX, window.scrollY);
});

behaviorというアニメーションに渡すこともできます.これは人を流暢に転がすことができるアニメです.だいたいこの方法のほうが好きです.

elem.scrollIntoView({behavior: })

上記の方法の欠点は、エレベータの左上隅の位置を知る必要があることである.ただし、コードは対応する要素を直接呼び出してスクロールします.

btn.addEventListener('click', function () {
  section1.scrollIntoView({ behavior: 'smooth' });
});

とても簡単です.