JavaScript를 사용하여 CSS 변수에 어떻게 액세스합니까?

JavaScript에서 CSS 변수에 액세스하는 방법

JavaScript에서 CSS 변수에 액세스하면 웹 애플리케이션의 스타일을 동적으로 조작할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.

1단계: 계산된 스타일 가져오기

getCompulatedStyle 함수를 사용하여 대상 요소의 계산된 스타일을 검색합니다.

2단계: 자산 확보 값

getPropertyValue 메소드를 활용하여 원하는 CSS 변수의 값을 가져옵니다.

구문:

getComputedStyle(element).getPropertyValue('--variable-name');

예:

값을 검색하려면 제공된 코드 조각에 선언된 --color-font-general CSS 변수:

var style = getComputedStyle(document.body);
var color = style.getPropertyValue('--color-font-general');

이 코드는 CSS 변수의 값을 캡처하여 color 변수에 저장합니다.

위 내용은 JavaScript를 사용하여 CSS 변수에 어떻게 액세스합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!