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>