목차
- setProperty() 예제 - 새 CSS 속성 설정
- setProperty() 정의
- setProperty() 구문
- setProperty() 예제 - "important" 매개변수
- setProperty() 예제 - 기존 CSS속성값 수정
setProperty() 예제 - 새 CSS 속성 설정
<style>
#hz {color:red; font-size:30px;}
</style>
<h1 id="hz">홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var declaration = document.styleSheets[0].cssRules[0].style; // [object CSSStyleDeclaration]
var setprop = declaration.setProperty("background-color", "yellow")
}
</script>
결과보기
setProperty() 정의
CSS 선언 블록에서 새 CSS 속성 설정 또는, 기존 CSS 속성 수정.
1.
IE9 이상 주요 최신브라우저 지원.
2.
DOM 버전 : CSS 객체 모델
setProperty() 구문
object.setProperty(propertyname, value, priority)
[매개변수]
propertyname
필수. 설정할 속성명
value
선택. 새 속성값
priority
선택. CSS적용우선순위 (!important) 표시여부
- "important" : 가장 먼저 적용
- undefined : 미정
- "" :
setProperty() 예제 - "important" 매개변수
<style>
#hz {color:red; font-size:30px;}
</style>
<h1 id="hz">홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var declaration = document.styleSheets[0].cssRules[0].style; // [object CSSStyleDeclaration]
var setprop = declaration.setProperty("background-color", "yellow", "important");
}
</script>
결과보기
setProperty() 예제 - 기존 CSS속성값 수정
<style>
#hz {color:red; font-size:30px;}
</style>
<h1 id="hz">홈짱닷컴 Homzzang.com</h1>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var declaration = document.styleSheets[0].cssRules[0].style; // [object CSSStyleDeclaration]
var setprop = declaration.setProperty("color", "blue");
}
</script>
결과보기