CSS variables with JS
👩🏻💻 자바스크립트로 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
할 때마다 값이 변경되도록 할 때 사용한다.
🍓 [참고] codepen을 velog로 옮겨오는 방법.
- codepen 하단에
embed
버튼 클릭 - iframe code 복사하기
!codepen[iframe copy code 붙여넣기]
형태로 삽입!
Author And Source
이 문제에 관하여(CSS variables with JS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimjumpsun_code/CSS-variables-with-JS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)