JavaScript를 사용하여 CSS 사용자 정의 속성(변수)에 어떻게 액세스하고 수정할 수 있습니까?

JavaScript를 통해 CSS 사용자 정의 속성(변수)에 액세스

JavaScript는 CSS 변수라고 알려진 CSS 사용자 정의 속성과 상호 작용할 수 있는 수단을 제공합니다. 스타일시트에서 var()로 정의되었음에도 불구하고 JavaScript를 통해 액세스하려면 약간 다른 접근 방식이 필요합니다.

사용자 정의 속성 가져오기 및 설정

사용자 정의 값을 얻으려면 속성을 사용하려면 다음 구문을 사용하세요.

var value = document.body.style.getPropertyValue('--property-name');

마찬가지로 사용자 정의 속성을 설정하려면, 사용:

document.body.style.setProperty('--property-name', 'new-value');

구현 예

CSS에 정의된 사용자 정의 속성 --mycolor를 요소의 배경색으로 고려하세요. JavaScript를 사용하여 색상을 변경하려면 다음 코드를 실행할 수 있습니다.

document.body.style.setProperty('--mycolor', 'red');

대체 방법

jQuery는 사용자 정의 속성과 상호 작용하는 방법도 제공합니다.

// Get property
var value = $('body').css('--property-name');

// Set property
$('body').css('--property-name', 'new-value');

공통 피하기 함정

초기 예에서 설명한 것처럼 표준 [style.property] 구문(예: document.body.style['--mycolor'])을 사용하여 사용자 정의 속성에 액세스하는 것은 작동하지 않습니다. 대신, 속성 이름 앞에 이중 하이픈이 있는 getPropertyValue 및 setProperty 메소드를 사용하세요.

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