분류 javascript

사용자 정의 속성을 사용하여 CSS와 JavaScript간에 데이터 공유

컨텐츠 정보

  • 조회 284 (작성일 )

본문

웹 개발 세계에서 우리가 볼 수 있는 큰 싸움 중 하나는 여전히 CSS와 JavaScript입니다. 둘 다 장점, 고유 한 구문 및 아이디어가 있으며 머리를 돌리는 것이 어려울 수 있습니다.


그렇기 때문에 두 사람이 소통 할 수 있는 방법이 있다는 점이 마음에 듭니다. 우선, DOM 요소의 스타일 객체를 조작하는 것이 항상 성가신 일이었습니다. 요소에 액세스하고 다양한 스타일 속성을 설정하는 것을 의미했습니다. 결국 손으로 쓰지 않는 인라인 스타일 속성이 생성되었습니다.


나에게 훨씬 더 깨끗한 방법은 CSS 사용자 정의 속성을 사용하는 것입니다. 이를 일반적으로 "CSS 변수"라고 하며--구문을 사용하여 CSS에서 정의합니다.


:root {
  --pagebackground: powderblue;
}
body {
  background: var(--pagebackground);
}


"변수"이기 때문에 스타일 문서 전체에서 다시 사용할 수 있습니다.


재미는 JavaScript를 사용하여 조작 할 때 시작됩니다. 이 예제의 경우 CSS 사용자 정의 속성이 문서의 루트 요소에 설정됩니다. 따라서 다음을 사용하여 JavaScript로 읽을 수 있습니다.


let bg = getComputedStyle(document.documentElement).
  getPropertyValue('--pagebackground');


또한 root 요소 (또는 사용자 지정 속성이 있는 다른 요소)의 스타일에 액세스하고 속성을 설정하여 JavaScript로 설정할 수 있습니다.


document.documentElement.style.setProperty('--pagebackground', 'firebrick');


codepen에서 라이브로 이것을 시도 할 수 있습니다.


이것의 가장 좋은 점은 자바 스크립트의 힘을 사용하여 접근 할 수 없는 CSS에 부여 할 수 있다는 것입니다. 예를 들어 CSS는 마우스 커서의 좌표를 읽을 수 없지만 JavaScript는 읽을 수 있습니다.


CSS에서 두 가지 속성을 0으로 정의 할 수 있습니다.


:root {
  --mouse-x: 0;
  --mouse-y: 0;
}


그리고 JavaScript에서 문서에 mousemove 핸들러를 추가하고 다음 두 속성을 조작합니다.


let root =  document.documentElement
document.addEventListener('mousemove', e => {
  root.style.setProperty('--mouse-x', e.x);
  root.style.setProperty('--mouse-y', e.y);
});


이것이 우리에게 필요한 모든 JavaScript입니다. CSS 사용자 정의 속성이 활성 상태이고 해당 값을 변경하므로 예를 들어 다음을 사용하여 CSS에서 마우스 커서가 있는 원을 표시 할 수 있습니다.


우리의 HTML :


<div id="ball"></div>



The CSS:
:root {
  --mouse-x: 0;
  --mouse-y: 0;
}
#ball {
 width: 20px;
 height: 20px;
 background: white;
 border-radius: 100%; 
 transform: translate(
 calc(calc(var(--mouse-x) - 10) * 1px), 
 calc(calc(var(--mouse-y) - 10) * 1px)
 );
}


SS에 대한 정보는 다음과 같습니다.

  • 공 DIV의 너비와 높이를 20 픽셀로 설정하고 배경을 흰색으로 설정합니다.
  • 테두리 반경을 100 % 추가하면 사각형이 아닌 원이 생깁니다.
  • 그런 다음 transform : translate를 사용하여 화면에 원을 배치합니다. 이것은 transform : translate (200px, 300px)와 같이 볼을 수평 200 픽셀, 수직 300 픽셀에 배치 할 수 있습니다.
  • JavaScript는 CSS 사용자 정의 속성을 숫자 값으로 설정하므로 "1px"를 곱하여 픽셀로 변환해야 합니다.
  • 공의 크기가 20 픽셀이므로 마우스 x와 마우스 y에 공을 놓을 수는 없지만 커서의 중앙에 위치 시키려면 공에서 10을 빼야 합니다.

이 트릭을 사용하면 복잡한 계산을 수행하고 JavaScript에서 브라우저 상태 및 상호 작용 상태를 읽고 CSS의 모든 모양과 느낌을 유지할 수 있습니다. 나에게 그것은 승리입니다.


작동하는 모습을 보고 싶다면 이 코드 펜을 사용해보세요. 또한 마우스 x 및 y 데이터를 재사용 하는 방법을 보여주기 위해 배경 효과를 추가했습니다.


https://christianheilmann.com/2021/02/08/sharing-data-between-css-and-javascript-using-custom-properties/