[Javascript/자바스크립트] HTML의 태그에 class를 추가,삭제하기

웹 개발을 할때 효과적인 코딩법은

html에는 html파일만 쓰고,

css에는 스타일값들을 나타내는 css파일만 쓰고,

js에는 로직만 처리할 수 있도록 분리하는 것이다.

그리고 그 js는 로직을 처리하며 html과 css를 조작할 수 있다.

간단한 예시를 알아보자.

 

 

JS를 이용하면 HTML의 특정 태그요소에 class를 추가하거나 삭제,수정 등의 행동을 할 수 있다.

크게 두가지 방법이 있다.

 

Element.className = 'class_names'

 - 기존에 class가 없으면 추가하고, 있으면 기존의 클래스를 변경(기존 클래스는 사라짐)

 

Element. className.add('class_names')

 - 클래스에 'class_names'라는 클래스가 추가(기존 클래스는 그대로 유지)

 

Element. className.remove('class_names')

 - 클래스 목록중 'class_ names'라는 클래스가 삭제

 

Element. className.contains('class_names')

 - 'class_names'라는 클래스를 가지고 있으면 true, 가지고 있지 않다면 false를 반환. 

 

Element. className.toggle('class_names')

 - 'class_names'라는 클래스가 없다면 추가하고, 있다면 제거

 

 

 

<form class="js-form-greetings form-greetings">
	<input type="text" placeholder="What is your name?" />
</form>
<h4 class="js-greetings greetings"></h4>

 

.form-greetings, .greetings{
	display:none;
}

.showing{
	display:block;
}

 

const form=document.querySelector(".js-form-greetings");
const input=form.querySelector("input");
const greeting=document.querySelector(".js-greetings");

const USER_LS="currentUser";
const SHOWING_CN="showing";

function saveName(text){
	localStorage.setItem(USER_LS,text);
}

function handleSubmit(){
	event.preventDefault();    //submit과 동시에 창이 새로고침 되는걸 방지
	const currentValue=input.value;
	paintGreeting(currentValue);
	saveName(currentValue);
}

function askForName(){
	form.classList.add("showing");
	form.addEventListener("submit",handleSubmit);
}

function paintGreeting(text){  //유저가 있을경우 색칠하기!!
	form.classList.remove(SHOWING_CN);
	greeting.classList.add(SHOWING_CN);
	greeting.innerText=`Hello ${text}`;
}

function loadName(){ //localStorage에서 value값을 가져오는 함수
	const currentUser=localStorage.getItem(USER_LS);
	if(currentUser===null){
		askForName();
	}else{ //localStorage에 유저가 있을경우
		paintGreeting(currentUser);
	}
}

function init(){
	loadName();
}

init();

 

input태그를 이용해서 text(사용자 이름) 를 입력받고, 그 이름을 localStorage에 저장한 뒤,

화면에 'Hello 석준' 이런 식으로 인삿말을 띄우는 예제이다.

위에서 설명한 classList메소드가 적절하게 활용 되었다.