자바스크립트 style 변경 하기!

 4가지 대표 예제

자바스크립트로 할 수 있는 대표적인 4가지 예제를 기술하고 있다.

오늘은 대표 예제 3번으로 "JavaScript 코딩으로 스타일(CSS) 변경하기"를 연습해 본다.

▶ 대표 예제 1번

▶ 대표 예제 2번

 자바스크립트 style 변경 하기!

JavaScript로 HTML 요소의 스타일(CSS)를 변경할 수 있다.

먼저 결과물을 보자

이제 HTML과 JavaScript 코딩을 풀이해 보자.

1. <p>태그가 있는 명령문

<p id="abc">아래 버튼 클릭하면 이 텍스트의 색깔과 크기가 바뀐다!</p>

<p>태그의 아이디를 "abc"로 지정 했다.

2. <button>태그가 있는 명령문

<button type="button" onclick="cssChange()" >이 버튼 클릭!</button> 

<button>태그로 화면에 버튼을 출력하고, onclick 했을 때 cssChange라는 이름을 가진 함수가 작동하게 함.

3.<script>태그가 있는 명령문 - 여기서 부터 자바스크립트

<script>

function cssChange() {

    var x = document.getElementById("abc");

    x.style.fontSize = "25px";           

    x.style.color = "blue"; 

}

</script>

cssChange라는 이름의 함수가 시작됨을 선언하고, 변수 x에 "abc" 아이디를 가진 HTML요소에 접근하는 명령어를 대입하였음. 변수 x의 폰트사이즈를 25px로, 변수 x의 폰트컬러를 blue로 만드는 함수를 정의함.