자바스크립트에서 id선택자 선택하기
자바스크립트에서 html에 있는 태그 중 id 속성이 있는 태그를 선택하고 싶을 때 사용한다.
getElementById는 이름에서 알 수 있듯이 이미 id선택자임을 지칭하고 있기 때문에 메서드의 소괄호 안에 #은 붙이지 않는다. 순수하게 이름만 들어간다.
[기본형]
document.getElementById("아이디이름")
*아이디이름은 문자열로 들어가야한다. 문자열로 들어가지않으면 변수로 취급한다.
ex) <body id=" the_body "> -> document.getElementById(" the_body ")
자바스크립트로 css에 특정 속성을 제어하고 싶다면 먼저 css로 접근을 해야한다.
접근하는 방법은 document객체에 포함되어 있는 .style 속성을 사용하는 것이다.
.style을 이용해 css에 접근했다면 css style 속성 중 어떤 것으로 바꿀 것인지 명시해주어야한다.
이때는 .style뒤에 바꾸고 싶은 속성을 앞에 .을 붙여 카멜표기법으로 작성한다.
[기본형]
1. 해당 id 선택자에 적용된 css스타일 속성에 현재 들어가 있는 값을 알고 싶을 경우
document.getElementById(아이디이름).style.속성명;
ex) document.getElementById(아이디이름).style.backgroundColor
-> background-color에서 -는 자바스크립트에서 빼기로 인식되기때문에 -로 연결되어 있으면 카멜표기법으로 작성
2. 해당 id 선택자에 적용된 css스타일 속성의 값을 바꾸고 싶은 경우
document.getElementById(아이디이름).style.css속성명 = '바꿀 값';
바꿀 값은 문자열로 들어가야한다.
'자바스크립트 > 자바스크립트와 html.css 연결' 카테고리의 다른 글
| [자바스크립트] - 자바스크립트에서 html 접근하기 / .setAttribute( )매서드 / 선택한 태그의 특정 속성을 수정 (0) | 2024.07.30 |
|---|