CSS 스타일 클래스 정의 + JS내 에서 HTML Element에 전달하기 in JS

horiz.d·2021년 11월 19일
0

JS 꿀단지

목록 보기
4/35

  • JS내에서 사용하는 obejct.className = "cssClass"를 볼 때, className 은 getter이자 setter이다.

  • 아래와 같은 방식은 JS와 CSS가 직접 대화하지 않는다, 대신 JS는 HTML을 변경하고 CSS는 HTML을 바라보고 있어서, HTML을 매개로 JS -(HTML)-> CSS로 이어지는 동작을 수행하게 된다.

in HTML

<body>
	<div class="hello">
        <h1 id="title1">It's me!</h1>
        <h1 id="title2">It's me!</h1>
    </div>
</body>

in CSS

.active{ /* CSS클래스 active 정의*/
	color : tomato;
}

in Javascript

const h1 = document.querySelector(".hello:first-chile h1");

h1.className = "active"; // h1 오브젝트에 CSS클래스 active내에서 할당한 스타일명세 데이터를 전달했음 

profile
가용한 시간은 한정적이고, 배울건 넘쳐난다.

0개의 댓글