반응형
목차
[Javascript] 자바스크립트에서 CSS 변경 하기 (HTML Style)
자바스크립트를 이용해서 고정된 css 값을 동적으로 변경할 수 있습니다. 변경에 필요한 함수는 아래와 같습니다.
Syntax>>
document.getElementById(id명).style.property = new style
위에 Syntax와 같이 변경하고자 하는 부분을 getElementById 로 찾은 다음에 style을 넣고 변경하고자 하는 css property를 입력하면 됩니다.
앞서 언급한 내용처럼 대부분 자바스크립트로 css 스타일을 변경하는 이유는 페이지 내에서 어떠한 이벤트(event)에 대한 동적인 반응을 위해 넣습니다.
아래 예제를 통해 쉽게 이해 할 수 있습니다.
[Javascript] 자바스크립트에서 CSS 변경 예제
예제 코드>>
<!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>https://scribblinganything.tistory.com/</title>
<style>
.class1 {
color: green;
}
</style>
</head>
<body>
<p class="class1" id="id1">버튼을 누르면 색이 바뀝니다</p>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">버튼</button>
</body>
</html>
결과>>
주석>>
<head>의 <style>에서 class로 정의된 css 값이 버튼 클릭에 의한 자바스크립트 동작으로 글짜 색이 변경되었습니다.
반응형