cursor_item.style.transform 관련 질문입니다!

Question

1. cursor_item 변수 선언 시, html에 cursor_item이 하나밖에 없어서 맨 끝에 [0]을 따로 안 넣었더니 cursor_item.style.transform이 실행되지 않았습니다.

개발자 도구를 통해 확인해보니, Cannot set properties of undefined (setting 'transform')라는 문구가 나왔습니다

변수를 선언할 class가 하나임에도 왜 몇 번째 원소인지 지정해줘야하나요??? (아래 그림 빨간 밑줄 참조)

2. cursor_item.style.transform = "translate("+ e.clientX + "px," + e.clientY + "px)"; 에서 왜 스트링으로 입력해야하는지 모르겠습니다.

(아래 그림 파랑 밑줄 참조)

Answer

getElementByID 는 Elements가 아니고 element 라서 [0] 이 필요 없습니다.

한 페이지 안에 같은 ID가 있으면 안 되기도 하고요.

하지만 class는 ID와 달리 여러개가 있어도 됩니다.

그래서 애초에 getElementsByClassName 인 겁니다.

그래서 하나가 있던 여러개가 있던 배열 형식으로 넘어오게 됩니다.

조금 더 편한 선택자도 있습니다.

querySelector('.cursor_item')

querySelectorAll('.cursor_item')[0] 으로 테스트 해보세요

_

cursor_item.style.transform = "translate("+ e.clientX + "px," + e.clientY + "px)"

위 스크립트는 css 속성값을 String으로 넣어줘야해서 콤마로 감싸준겁니다.

자바스크립트로 스타일 속성을 컨트롤 하는 방법이라고 생각하면 됩니다.

css에서는 아래와 같은 모습이죠.

.cursor_item {

transform : translate('100px', '100px');

}

다른 방식으로는 아래와 같은 방법이 있습니다.

더욱 최신 스타일이지만 구형 IE에서 작동이 안 됩니다.

cursor_item.style.transform = `translate(${e.clientX}px, ${e.clientX}px)`;