[220115] js를 이용한 class="on" 생성/제거하기

목차

1.   클릭으로 class 생성,제거하기

2.   원하는 위치에 생성하기

 

---

자바스크립트 그래서 대체 뭘 어떻게 쓰는건데..하다가 드디어 실사용을 하기 시작. 배우자마자 너무 미쳤다..하고 마음속에서 기립박수쳤다. 이걸 이렇게 쓴다고?? 이런 맛에 프로메테우스가 인간한테 불을 준건가. 박수 짝짝짝 손 터지게 치고 앞으로 세바퀴 굴렀다. 미쳤다.

 

[웹페이지는 html, css, javascript 3개로 구현되고 있는데, 자바스크립트는 html을 조정할수 있다]란 말을 실천해보자.

---

 

클릭으로 class="on" 생성하기

See the Pen make_class_on by supermint (@ma_ad_shouri) on CodePen.

 

 

클릭함으로써 id가 box1인 div를 숨기는 코드다.

클릭을 함으로써 div 속성에 class="on"을 생성해 <div id="box1" class="on">를 완성한다.

하지만 css에 #box1.on일 경우에 display=none;이라고 작성해놓았기 때문에 브라우저에서 보이지 않는것.

 

 

 

---

 

클릭으로 class="on"을 삭제하기

See the Pen make_class_on_label by supermint (@ma_ad_shouri) on CodePen.

 

 

label을 생성했다. div를 클릭하면 사라지고, label을 클락하면 나타나게 만들어보았다.

대신, 클릭 영역에 겹쳐있는 span이 맨 앞에 와있으므로 span을 클릭하면 div나 label을 클릭한것으로 여겨지지 않기때문에 사라지지 않는다. span을 클릭할때마다 같은 효과를 먹일 수 있겠지만, span이란 영역 하나하나에 js를 먹인다는 것은 무의미하다고 생각한다. 그래서 열고 닫을 수 있는 버튼을 따로 빼나보다.

 

---

 

그러면 라벨을 자바스크립트에서 만들고 같은 기능을 부여하는것도 가능한가...?

See the Pen make_label_js by supermint (@ma_ad_shouri) on CodePen.

 

새로 알게된 Element 생성 코드

node.append(노드나 문자열) – 노드나 문자열을 node 끝에 삽입.

node.prepend(노드나 문자열) – 노드나 문자열을 node 맨 앞에 삽입.

node.before(노드나 문자열) –- 노드나 문자열을 node 이전에 삽입.

node.after(노드나 문자열) –- 노드나 문자열을 node 다음에 삽입.

node.replaceWith(노드나 문자열) –- node를 새로운 노드나 문자열로 대체함.

 

되긴 되네.. 되긴하지만 현재 내 상태에서는 잘 쓰지 않을 것 같다.

물론 html 코드야 깨끗하겠지만 나중에 내 코드를 뜯어볼때 분명 이럴걸.

"왜지. html코드에 없는데 왜 이건 왜 생겨있는데. 뭔데 이거."

이럴게 눈 앞에 너무 선함. 과거의 나를 믿지말고 미래의 내가 이걸 봤을때 어떨가 생각하자. 아무것도 생각나지 않아도 코드를 다룰 수 있게 주석도 달아놓자.