[JS] querySelector - CSS Property 접근 하기
- Programming/WEB
- 2022. 11. 23.
💬 안녕하세요 nov입니다. 이전 포스팅에서 window document 객체의 querySelector와 querySelectorAll 메서드를 사용해 HTML element에 접근하는 방법에 대해서 정리해 보았습니다.
→ [JS] querySelector & querySelectorAll - HTML element 접근하기
이번 이어지는 포스팅에서는 querySelector 메서드를 이용하여 CSS Property에 접근하는 방법과 유의할 점에 대해 정리해 보도록 하겠습니다.
💡 개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있으며, 지속적으로 수정해 나갈 예정입니다.
querySelector With CSS Property
document.querySelector를 이용하면 CSS의 Property에 접근할 수 있습니다.
다음은 querySelector를 이용해 HTML의 Body Tag에 접근한 뒤, Body Tag의 background-color property를 lightgray로 변경하는 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>document.querySelector('body').style.backgroundColor = 'lightgray';
HTML element 접근하는 방식과 크게 다르지 않지만, CSS Property에 접근할 때 유의해야할 몇가지 주의사항이 존재합니다.
1. DOM으로 CSS를 조작하는 경우에, 속성을 반드시 string type으로 명시해 주어야 합니다.
예를들어 다음과 같이 string type 외에 number 혹은 다른 타입을 사용하면 에러가 발생합니다.
document.querySelector('body').style.backgroundColor = lightgray;
2. CSS의 두 단어 이상으로 이루어진 Property를 정의할 때는 camelCase로 작성해야 합니다.
CSS에서 두 단어 이상으로 이루어진 Property의 이름은 "background-color" 처럼 단어 사이를 "-"기호로 구분합니다.
document.querySelector('body').style.background-color = '#60b347'; // error하지만 JS는 "-"를 뺄셈 연산자로 인식해 버립니다. 따라서 backgroundColor 와 같이 camelCase로 작성해야 에러가 발생하지 않습니다.
document.querySelector('body').style.backgroundColor = 'lightgray';'Programming > WEB' 카테고리의 다른 글
| [JavaScript] Logical Operator && || 의 또 다른 기능 Short Circuiting (0) | 2022.12.13 |
|---|---|
| [JS] this Keyword 정복 하기 Vol1 - about this keyword (0) | 2022.11.26 |
| [JS] querySelector & querySelecotrAll - HTML element 접근 하기 (0) | 2022.11.21 |
| [Node.js] Path Module 사용법 (0) | 2022.07.09 |
| [HTTP] HTTP Request & Response 메시지 구조 (0) | 2022.06.27 |