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

get Element ByID 는 Elements가 아니고 element 라서 [0] 이 필요 없습니다. 한 페이지 안에 같은 ID가 있으면 안 되기도 하고요. 하지만 class는 ID와 달리 여러개가 있어도 됩니다. 그래서 애초에 get Elements ByClassName 인 겁니다. 그래서 하나가 있던 여러개가 있던 배열 형식으로 넘어오게 됩니다. 조금 더 편한 선택자도 있습니다. querySelector('.cursor_item') querySelector All ('.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)`;