CSS variables with JS

2386 단어 자바스크립트자바스크립트

👩🏻‍💻 자바스크립트로 CSS 변수 조절하기!

css 변수를 사용해서 간격이나, 블러처리, 폰트 크기, 컬러 등을 실시간으로 변경 가능하다.

오늘 기억할 두 가지 point code : data-attribute 그리고 document.documentElement.style.setProperty

1. data- attribute

data-* 속성은 표준이 아닌 추가적인 DOM 속성으로
Node.setUserData()과 같은 다른 조작을 하지 않고도 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해준다.
출처: MDN

  • data- 로 시작하는 속성은 무엇이든지 사용이 가능하다.
    data-name: hey!, data-sizin: px 과 같이 화면에 보이지 않지만 추가 정보를 엘리멘트에 담아 놓을 수 있다.
  • 데이터 값은 문자열이다! 스타일을 적용하기위해 숫자 값은 선택자의 따옴표 안에 써주어야 한다.
  • 자바스크립트에서 접근할 때에는 dataset. 속성으로 읽을 수 있으며, dataset.name='bambie 로 변경도 가능하다.
  • CSS 에서 접근할 때에는 attr 함수의 생성된 content를 사용해서 변경 가능하다.
		article::before {
 			 content: attr(data-parent);
		}
  • CSS의 속성 선택자도 데이터에 따라 스타일 변경 가능하다. 
		article[data-columns='3'] {
  			width: 400px;
		}
		article[data-columns='4'] {
 			 width: 600px;
		}

데이터 속성 언제 쓸까?

데이터 속성들은 게임 점수 처럼 계속 변하는 정보도 저장할 수 있어서 유용하고 외에도 다방면에서 많이 사용된다고 한다.
👻 게임 캐릭터의 점수 값 변경시키는 재밌는 코드 구경

2. document.documentElement.style.setProperty

  • CSS style에 새로운 값을 넣어주기 위해 method interface를 활용한다.

  • style.setProperty(propertyName, value, priority); 형태로 스타일 이름, 스타일 내용을 작성해서 사용

  • 클릭할 때마다 속성 값을 변경시켜주는 코드 를 만들 수 도 있고 아래의 코드처럼 mouseover 할 때마다 값이 변경되도록 할 때 사용한다.

코드펜에서 보기