style 속성

gogori6565·2022년 7월 9일
0

JavaScript

목록 보기
7/10

style 속성

우리는 여태 스타일 적용을 CSS 파일에서 했지만,
HTML과 JavaScript 에서 스타일 적용이 가능하다!

HTML - style="속성:속성값;"

<p style="color:red;">이 글씨는 빨간색입니다.</p>

<태그 style="속성:속성값;"></태그> 로 작성해주면 된다.

JavaScript - .style.속성 = "속성값";

QuerySelector로 가져온 노드에서 style 속성을 참조해 CSS 속성을 적용시킬 수 있다.

[html]
<div id="main">메인페이지 입니다~</div>
<div id="qna">QnA페이지 입니다^^</div>
[js]
const main = document.querySelector('#main');
const qna = document.querySelector('#qna');

main.style.display="none";
qna.style.display="block";

#main의 div가 보이지않고, #qna의 div가 보이게 된다.
적용할 노드.style.속성 = "속성값"; 로 작성해주면 된다.

profile
p(´∇`)q

0개의 댓글