css변수를 자바스크립트로 제어(feat.vue)

#(--variable)

/*
 전역 변수 설정
 --변수명:값
*/

/*
 변수의 element 적용
 var(변수명)
*/


// 인라인 스타일 변수 확인
document.documentElement.style.getPropertyValue("변수명");

// 글로벌로 변수 확인
getComputedStyle(document.documentElement).getPropertyValue("변수명");

// 인라인 스타일에 변수 설정
document.documentElement.style.setProperty("변수명", "변수속성");

 

🙄위를 응용하여 만든 셀렉트 값에 따른 박스 높이 조정

 

 

😉getComputedStyle

위의 작업을 하다가 높이값을 보여줄려고 할때 문제가 생겨서 검색하면서 알게 된 사실👋

 

자바스크립트에서 외부 선언된 엘리먼트의 스타일 값 가져올때

인라인으로 선언된 경우 element.style.속성명 으로 값을 가져올 수 있으나
외부에 선언된 경우 해당코드로 찍으면 빈값이 나온다

노드 자체에 스타일 속성으로 스타일이 적용되어져 있으므로 가져올수 있으나
외부에 있는것은 그렇게 가져올수 없다.


이때 브라우저에서 제공하는 getComputedStyle() 을사용하여 가져 올수 있다.

window.getComputedStyle(element).속성명 으로 가져올 수 있다.

브라우저에 적용된 최종 CSS 스타일 데이터를 가져오는 것이다.

getComputedStyle()로 반환된 객체는 읽기전용(확인)으로 쓰이며 스타일자체를 변경할수 없다.
스타일을 변경할때는 element.style.속성명 = "변경할 값" 으로 변경하여야 한다.

 

도움받은곳 : https://helloinyong.tistory.com/284

 

반응형

 

👀vue파일안에 style은 v-bind 로 줄수있다???

const 변수명 = ref("440px");

변수명.value = `${130 * (value < 3 ? value : 3) + 50}px`;

<style>
	min-height: v-bind("변수명");
</style>

//:root 안쓰고 이렇게 사용할 수 있음