getComputedStyle() 메서드는 대상 요소에 적용된 모든 스타일을 포함하는 객체를 제공합니다. getPropertyValue() 메서드는 계산된 스타일에서 원하는 속성을 얻는 데 사용됩니다. setProperty()는 CSS 변수의 값을 변경하는 데 사용됩니다.
예시
다음 예는 JavaScript를 사용하여 CSS 변수를 가져오고 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--outerColor: magenta;
--innerColor: lightgreen;
text-align: center;
}
div {
margin: 5%;
padding: 10%;
background-color: var(--innerColor);
border: 2px groove var(--outerColor);
}
</style>
</head>
<body>
<div onmouseover="showColor()" onmouseout="changeColor()">
<p></p>
</div>
</body>
<script>
let ele = document.querySelector(':root');
let para = document.querySelector('p');
function showColor() {
let cs = getComputedStyle(ele);
para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color");
}
function changeColor() {
let item = document.querySelector('div');
item.style.setProperty('--innerColor', 'magenta')
}
</script>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--customColor: seagreen;
}
div {
margin: 5%;
width: 130px;
height: 130px;
box-shadow: inset 0 0 38px var(--customColor);
border-radius: 50%;
}
</style>
</head>
<body>
<div onmouseover="toggle()"></div>
</body>
<script>
let ele = document.querySelector(':root');
function toggle() {
let cs = getComputedStyle(ele);
let item = document.querySelector('div');
if(cs.getPropertyValue('--customColor') !== 'blue') {
item.style.setProperty('--customColor', 'blue')
}
}
</script>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
