다연이네

[days05] CSS 전역변수와 document.querySelector 본문

Web/CSS

[days05] CSS 전역변수와 document.querySelector

　다연　 2020. 12. 9. 19:18
반응형

전역변수

 :root선택자 사용   -> var() 함수를 통해 사용 가능하다.

 

선언예시

<style>

:root{
	/* --변수명:값; */
	--blue:#1E90FF;
	--white: #fff;
}

<style> 내에서 사용 예시

body{
	background: var(--blue);
}

자바스크립트에서 사용할 때

var r = document.querySelector(":root");
var rs = getComputedStyle(r);

//getComputedStyle(r); - root로부터 스타일(속성명, 값들)을 얻어오는 함수

<script>
	function getVariable() {
		/* :root 선택자 */
		//document.getElementById(id) 이렇게 가져올게 아니라
		var r = document.querySelector(":root");
		var rs = getComputedStyle(r); //암기
		
		window.alert( rs.getPropertyValue('--blue') );
	}
    
    
    function setVariable() {
		var color = document.getElementById("blueColor").value;
		//window.alert( color );
		var r = document.querySelector(":root");
		r.style.setProperty("--blue",color); 
		//얻어올때는 getProperty 설정할때는 setProperty
	}
</script>

rs.getPropertyValue('--blue');    -> --blue라는 전역변수의 속성 알아오기(가져오기) 

r.style.setPropertyValue('--blue');   -> --blue라는 속성으로 설정하기

 

 

 

 

위의 Get CSS Variable ~ 버튼을 누르면 (텍스트와 상관없이) [현재 배경색인 #1E90FF]가 alert으로 뜬다.

우측 Set CSS Variable ~ 버튼을 누르면 옆의 텍스트 색상으로 배경 색이 변한다.

Get 버튼
Set 버튼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
/* 전역변수 :root선택자 사용   -> var() 함수를 사용해 사용가능 */
/* 변수 #1E90FF;  */
:root{
	/* --변수명:값; */
	--blue:#1E90FF;
	--white: #fff;
}

body{
	background: var(--blue);
}
h2{
	border-bottom: 2px solid var(--blue);
}
.container{
	color: var(--blue);
	background: var(--white);
	padding: 15px;
}
.container button{
	background: var(--white);
	color:var(--blue);
	border: 1px solid var(--blue);
	padding: 5px;
}
</style>

</head>
<body>
<!-- css변수 -->
<h1>Lorem ipsum dolor sit amet.</h1>
<!-- .container>h2>lorem2^p*2>lorem15^button*2 -->
<div class="container">
	<h2>Lorem ipsum.</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ullam quae tempore aliquam commodi aperiam!</p>
	<p>Cumque ipsum eius voluptatibus provident reiciendis fugiat veniam ratione fuga harum est maiores exercitationem architecto.</p>
	<button>Yes</button>
	<button>No</button>
</div>

<button onclick="getVariable()">Get CSS Variable with javascript</button>
<br>
<input type="text" id="blueColor" value="lightblue" />

<button onclick="setVariable()">Set CSS Variable with javascript</button>


<script>
	function getVariable() {
		/* :root 선택자 */
		//document.getElementById(id) 이렇게 가져올게 아니라
		var r = document.querySelector(":root");
		var rs = getComputedStyle(r); //암기
		//getComputedStyle(r); - root로부터 스타일(속성명, 값들)을 얻어오는 함수
		window.alert( rs.getPropertyValue('--blue') );
	}
	
	function setVariable() {
		var color = document.getElementById("blueColor").value;
		//window.alert( color );
		var r = document.querySelector(":root");
		r.style.setProperty("--blue",color); 
		//얻어올때는 getProperty 설정할때는 setProperty
	}
</script>

</body>
</html>

 

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days06] setTimeout/setInterval  (0) 2020.12.16
[days05] 툴팁(Tooltip)  (0) 2020.12.09
[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기  (0) 2020.12.09
[days05] CSS 애니메이션  (0) 2020.12.09
[days05] CSS 전환 - transition  (0) 2020.12.09
'Web/CSS' Related Articles more
Comments