목차
- getPropertyValue() 예제 - CSS 속성값 얻기
- getPropertyValue() 정의
- getPropertyValue() 구문
- getPropertyValue() 예제 - 내부스타일로 정의된 속성값 반환
getPropertyValue() 예제 - CSS 속성값 얻기
<style>
#hz {color: red !important;}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<p id="demo"></p>
<script>
function homzzang() {
var declaration = document.styleSheets[0].cssRules[0].style; // [object CSSStyleDeclaration]
var propvalue = declaration.getPropertyValue("color"); // red
document.getElementById('demo').innerHTML = propvalue;
}
</script>
결과보기
getPropertyValue() 정의
지정 CSS 속성값 반환.
1.
getComputedStyle() 메서드와 사용 시 더 편리하게 사용 가능.
※ 아래 예제 참고.
2.
IE9 이상 주요 최신 브라우저 지원.
3.
DOM 버전: CSS Object Model
getPropertyValue() 구문
object.getPropertyValue(propertyname)
[매개변수]
propertyname
필수. 속성명
[반환값]
속성값
getPropertyValue() 예제 - 내부스타일로 정의된 속성값 반환
<style>
#hz {font-family:Verdana, sans-serif;}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<script>
function homzzang() {
var hz = document.getElementById("hz");
var x = getComputedStyle(hz).getPropertyValue("font-family");
alert(x);
}
</script>
결과보기
PS. 주의: getComputedStyle() 메서드 이용 안 하면 반환 안 됨.
<style>
#hz {font-family:Verdana, sans-serif;}
</style>
<button onclick="homzzang()">클릭</button>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<script>
function homzzang() {
var hz = document.getElementById("hz");
var x = hz.getPropertyValue("font-family");
alert(x);
}
</script>
결과보기