두 언어는 서로 다른 방식으로 변수 할당 및 조작에 접근하므로 이 질문에 대한 단일 답변은 없습니다. 그러나 일반적으로 말해서 JavaScript로 CSS 변수를 변경하려고 할 때 한 가지 문제는 두 언어가 변수를 선언하고 액세스하는 데 서로 다른 구문을 사용한다는 것입니다. 또한 CSS 변수는 일반적으로 개별 요소 수준이 아닌 스타일 시트 수준에서 정의되므로 JavaScript 코드 내에서 액세스하기 어려울 수 있습니다.
var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");
이 코드 행은 CSS 변수에 대한 새 값을 설정합니다. 첫 번째 줄은 ID가 "element"인 요소를 가져옵니다. 두 번째 줄은 CSS 변수 "–variable"의 값을 "new-value"로 설정합니다.
CSS 변수
CSS 변수는 전역 변수를 사용하지 않고도 CSS 파일에 데이터를 저장할 수 있는 좋은 방법입니다. 현재 페이지의 너비나 높이 또는 현재 글꼴 크기와 같은 정보를 저장하는 데 사용할 수 있습니다.
JavaScript 코드에서 CSS 변수를 사용하려면 먼저 문서의 스타일 시트에 css 속성을 포함해야 합니다. 그런 다음 var 키워드를 사용하여 변수를 정의할 수 있습니다.
var 너비 = document.getElementById("myElement").offsetWidth;
css 속성을 사용하여 변수의 개별 값에 액세스할 수도 있습니다.
var 너비 = document.getElementById("myElement").offsetWidth; var height = document.getElementById("myElement").offsetHeight;
제어 CSS
JavaScript에는 CSS를 제어하는 몇 가지 방법이 있습니다. 한 가지 방법은 css 속성을 사용하는 것입니다. 이 속성을 사용하면 문서의 특정 요소에 대한 스타일을 설정할 수 있습니다.
CSS를 제어하는 또 다른 방법은 style 속성을 사용하는 것입니다. 이 속성을 사용하면 문서의 모든 요소에 대한 스타일을 설정할 수 있습니다.
