[JavaScript] HTML 내용 및 CSS color 속성 변경하기

개념

HTML의 문자(내용) 수정하기

html 코드의 id 값을 이용하여 자바스크립트로 코드를 수정할 수 있다.

<p id="apple"></p>

document.getElementById("apple").innerHTML = "apple";

원래 p 태그에 아무 내용도 없었지만, 자바스크립트로 위와 같이 입력해주면 "apple"이라는 단어가 출력된다.

만약, p 태그에 다른 내용이 있었더라도 innerHTML을 이용하면 해당 값으로 수정된다.

 

CSS의 color 속성 수정하기

<h1 id="bow">Hello!</h1>
<button onclick="btn()">Click</button>

// 1. h1의 색깔 수정하기
document.getElementById("bow").style.color = "red";

// 2. 버튼을 눌렀을 때 h1의 색깔이 변경
function btn() {
	document.getElementById("bow").style.color = "red";
};

이외에도 변수를 선언하여 함수를 이용하는 방법 등 수정할 수 있는 방법은 많지만, ㅜ이 방법들이 그 중에서 그나마 가장 간단한 방법이지 않을까 싶다.

위 코드는 CSS의 속성 중 하나인 color를 변경하는 방법으로, 이외에 다른 style의 속성을 변경하는 방법은 모두 다르니 다른 방법들을 참고하는 게 좋을 것이다.

 

문제

html 코드에서 id가 color인 p 태그를 클릭했을 때, 색깔을 빨간색으로 변경하라.
(단, var를 이용하여 함수를 정의하고 함수를 호출하는 방법을 사용해야 한다.)

var colorChange = function() {
	color.style.color = "red";
};

color.onclick = function() {
	colorChange();
};

document.getElementById("color")는 그냥 color(Id 이름)로 대체할 수 있다.

 

html 코드에서 id가 apple, 내용은 "사과"인 h1 태그의 내용을 "사과는 맛있다"로 변경하라.
(단, 단순히 innerHTML만을 사용하지 않고 + 연산자의 "연결" 속성을 이용해야 한다.)

var applePlus = document.getElementById("apple");
applePlus.innerHTML += "는 맛있다";

누적연산자 +-를 이용하여 기존 내용에 문자를 추가시킬 수 있다.

 

html 코드에 id가 hello, 내용이 "Hello!"인 h2 태그와 3개의 button 태그가 각각 있다고 하자.
button에 id 혹은 onclick을 설정하여 h2의 색깔을 각 button을 누를 때마다 모두 다른 색이 나오도록 설정하라.
(단, 각각의 button마다 조금이라도 차이가 있는 자바스크립트 코드를 작성해야 한다.)

// 첫 번째 버튼
function color() {
	document.getElementById("hello").style.color = "red";
};

// 두 번째 버튼
var colorChange = function() {
	hello.style.color = "blue";
};

btn1.onclick = function() {
	colorChange();
};

// 세 번째 버튼
document.getElementsByTagName("button")[2].onclick = function() {
	hello.style.color = "green";
};

첫 번째 버튼에는 onclick을 주어 color라는 이름의 함수가 작동하도록 하였고, 두 번째 버튼에는 함수를 따로 선언, 따로 onclick에 함수를 호출하였으며 세 번째 버튼에는 getElementsByTagName을 이용하였다.