DOM을 활용하여 HTML태그에 스타일을 적용해 보다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.h1_style{
color: yellow;
background-color: black;
}
.btn_style{
width: 150px;
height: 50px;
border: 0px;
}
</style>
</head>
<body>
<h1>DOM 스타일 속성 실습</h1>
<button>스타일 변경</button>
<!-- JavaScript -->
<script>
// 스타일 변경 방법
// 요소객체.style.스타일속성 = 값
let h1Tag = document.getElementsByTagName("h1")[0];
let btn = document.getElementsByTagName("button")[0];
// 버튼을 클릭했을 때, h1요소의 스타일을 변경하는 이벤트
// -> 글자색 : 검정색 -> 노란색, 배경색: 검정색
// + 버튼에 클래스속성 추가하기
btn.addEventListener("click", () => {
// 간단한 스타일 변경은 자바스크립트 코드로 구현
// h1Tag.style.color = "yellow";
// h1Tag.style.background = "black";
// 스타일 속성이 많아질 경우에는
// id나 class속성을 추가하여 구현
h1Tag.setAttribute("class", "h1_style")
btn.setAttribute("class", "btn_style")
})
</script>
</body>
</html>
Case 1) 자바스크립트 코드로 스타일 직접 작성하기
// + 버튼에 클래스속성 추가하기
btn.addEventListener("click", () => {
// 간단한 스타일 변경은 자바스크립트 코드로 구현
let h1Tag = document.getElementsByTagName("h1")[0];
let btn = document.getElementsByTagName("button")[0];
h1Tag.style.color = "yellow";
h1Tag.style.background = "black";간단한 스타일을 적용할 때 사용하는 방법이다.
DOM으로 태그네임을 통해서 가져온 태그는 유사배열이니까 인덱스 번호로 접근해서 새로운 변수에 넣어준다.
(요소가 들어있는) 변수. style. 속성이름 = "속성값";
Case 2) 복잡한 스타일, 주로 사용하는 방법
<style>
.h1_style{
color: yellow;
background-color: black;
}
.btn_style{
width: 150px;
height: 50px;
border: 0px;
}
</style> // 스타일 속성이 많아질 경우에는
// id나 class속성을 추가하여 구현
h1Tag.setAttribute("class", "h1_style")
btn.setAttribute("class", "btn_style")HTML문서의 태그의 속성과 그 값을 설정해서 태그에 id나 class를 준다.
그 id나 class를 선택자로 하는 CSS 문법으로 스타일을 적용하는 방법이다.
내가 생각하기엔 CSS를 배울 때 들었던 느낌과 굉장히 유사한 느낌이 들었다. 그냥 태그에 id나 class 만들어주고 그거 선택자로 하는 CSS 스타일 적용하는 것뿐이다.
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex14_숫자맞추기 실습.html (선생님 코드.ver) (0) | 2023.06.21 |
|---|---|
| [JS] Ex14_숫자맞추기 실습.html (실패한 코드.ver) (0) | 2023.06.20 |
| [JS] Ex12_DOM속성실습.html (0) | 2023.06.20 |
| [JS] Ex11_DOM속성.html (0) | 2023.06.20 |
| [JS] Ex10_이벤트 실습.html (0) | 2023.06.19 |
