자바스크립트에서 문서 객체 모델(dom, Document Object Model)을 조작하여 CSS를 적용하는 예시를 하나 보여드리겠습니다. 아이디가 test인 div 요소의 배경색을 노란색으로 해주는 코드입니다.
<div id="test">
안녕하세요
</div>
<script>
const testDiv = document.getElementById("test");
testDiv.style.backgroundColor = 'yellow';
</script>
document 객체의 getElementById() 메서드로 test를 아이디로 갖는 요소를 선택합니다. 그 다음에 객체.style.backgroundColor의 값을 "yellow"로 설정함으로 해당 요소의 배경색을 노란색으로 설정합니다.
'Dev > javascript' 카테고리의 다른 글
[javascript] 간단한 조건문 처리는 삼항 조건 연산자로 대체 가능 (0) | 2024.02.01 |
---|---|
[WebSquare5] 인스웨이브사의 WebSquare5 사용해본 소감 (1) | 2024.01.04 |
[javascript] swiper.js 롤링이 처음으로 돌아가는 방법 (0) | 2024.01.03 |
[javascript] new 연산자란 (0) | 2023.12.16 |
[nextjs] tailwindcss 사용할 때 globals.css에 있어야 하는 코드 (0) | 2023.12.09 |
[javascript] 비교연산자 ==와 === 차이 비교 (0) | 2023.11.15 |
자바스크립트의 패키지 관리자 npm과 pnpm (0) | 2023.11.14 |
[nextjs] Vercel로 배포하는 방법 (0) | 2023.11.08 |