[DOM] JS - CSS - 스타일변경

CSS 스타일변경 - 문서 로드 시

 

<p id="p1">홈짱닷컴</p>

<p id="p2">Homzzang.com</p>

<script>

var host = document.getElementById("p2");

host.style.color = "red";

host.style.fontFamily = "Arial";

host.style.fontSize = "larger";

</script>

 

결과보기

CSS 변경하는 JS 구문

 

object.style.propery = "value" ;

 

---

 

object

객체

 

property

속성. CSS의 속성명과 유사하나 약간 차이 있으니 사용 시 주의 !!

 

value

속성값

 

CSS 스타일 변경 - 이벤트 발생 시1 (글자 스타일 변경)

 

<h1 id="hz">Homzzang.com</h1>

<button type="button" onclick="document.getElementById('hz').style.color = 'red'">클릭</button>

 

결과보기

---

 

<h1 id="hz">Homzzang.com</h1>

<button type="button" onclick="color_change()">클릭</button>

<script>

function color_change() {

  document.getElementById('hz').style.color = 'red';

}

</script>

 

CSS 스타일 변경 - 이벤트 발생 시2 (숨기기/보이기)

 

<p id="hz">

홈짱닷컴 Homzzang.com

</p>

<input type="button" value="숨기기" onclick="document.getElementById('hz').style.visibility='hidden'">

<input type="button" value="보이기" onclick="document.getElementById('hz').style.visibility='visible'">

 

결과보기

---

 

<p id="hz">

홈짱닷컴 Homzzang.com

</p>

<input type="button" value="숨기기" onclick="hide()">

<input type="button" value="보이기" onclick="show()">

<script>

function hide() {

  document.getElementById('hz').style.visibility='hidden';

}

function show() {

  document.getElementById('hz').style.visibility='visible';

}

</script>