목차
- cssText 예제 - 스타일 반환
- cssText 정의
- cssText 구문
- cssText 예제 - 스타일 설정
cssText 예제 - 스타일 반환
<h1 style="color: red; font-size:30px;">홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var h1 = document.getElementsByTagName("h1")[0];
var x = h1.style.cssText;
document.getElementById("demo").innerHTML = x;
}
</script>
결과보기 (결과값: color: red; font-size: 30px;)
주의: 내부스타일이나 외부스타일 경우엔 작동 X
cssText 정의
요소의 인라인스타일 선언값 설정/반환.
1.
모든 브라우저 지원.
2.
DOM 버전 : Level 2 Style CSS
3. MDN cssText 예제 보기
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText
cssText 구문
[반환] - 인라인스타일 문자열 반환.
element.style.cssText
[설정]
element.style.cssText = inlineStyleCode
cssText 예제 - 스타일 설정
<h1 style="color:red; font-size: 50px">Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var h1 = document.getElementsByTagName("h1")[0];
h1.style.cssText = "color: blue;";
}
</script>
결과보기