목차
<style> 객체 정의 - 스타일 정의 <style> 객체 구문 <style> 객체 예제 - 접근 <style> 객체 예제 - 생성 <style> 객체 속성
<style> 객체 정의 - 스타일 정의
<style> 태그 또는 지정요소의 인라인 style 속성 의미.
<style> 객체 구문
[접근]
문서헤드섹션의 style 태그에 접근
var x = document.getElementsByTagName("STYLE")[0];
지정요소의 style 속성에 접근
var x = document.getElementById("hz").style;
[생성]
<style> 태그 생성
var x = document.createElement("STYLE");
style 속성 생성
document.getElementById("hz").style.color = "red";
<style> 객체 예제 - 접근
[문서헤드섹션]
<head>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
</head>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementsByTagName("STYLE")[0];
document.getElementById("demo").innerHTML = x.innerHTML;
}
</script>
결과보기
[지정요소]
<h1 id="hz" style="color:red">Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").style.color;
document.getElementById("demo").innerHTML = x;
}
</script>
결과보기
<style> 객체 예제 - 생성
[문서헤드섹션 안 스타일태그 생성]
<head>
</head>
<h1>홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("STYLE");
var t = document.createTextNode("body {font: 20px verdana; color:red;}");
x.appendChild(t);
document.head.appendChild(x);
}
</script>
결과보기
[지정요소 스타일속성 생성]
<h1 id="hz">홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.color = "red";
}
</script>
결과보기
<style> 객체 속성
https://homzzang.com/b/js?sca=DOM_Style
https://homzzang.com/b/js?sca=CSS_Objects
최신댓글