JavaScript/Nomad Coders
[TIL] ๐ก Day 5 - JS๋ฅผ ํตํด์ CSS๋ฅผ ์กฐ์ํ๋ ๋ฐฉ๋ฒ๋ค
vividmin
2022. 3. 13. 23:25
320x100
โ ์ด ํฌ์คํ ์ ๋ ธ๋ง๋์ฝ๋ - "๋ฐ๋๋ผ JS๋ก ํฌ๋กฌ ์ฑ ๋ง๋ค๊ธฐ๋ฅผ ๋ค์ผ๋ฉด์ ๊นํ๋ธ์ ๊ธฐ๋กํ ํ๊ธฐ๋ฅผ ์ฎ๊ธด ๋ด์ฉ์ ๋๋ค.
JS๋ฅผ ํตํด์ CSS๋ฅผ ์กฐ์ํ๋ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ ๋ฐฐ์ ๋ค.๐
๐ฑ CSS in Javascript 1๏ธโฃ
๐ JS์์์ style๋ก CSS์ ์ ๊ทผํ์ฌ ์กฐ์ํ๋ ๋ฐฉ๋ฒ
- ์์ ์ฝ๋
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
// getter - ๊ฐ์ ๊ฐ์ ธ์ด
console.log(h1.style.color);
// setter - ๊ฐ์ ์ค์ ํจ
h1.style.color = "cornflowerblue";
console.log(h1.style.color);
}
// console๊ฒฐ๊ณผ : ์ฒ์์ ๋น์นธ์ผ๋ก ๋์ค๊ณ , ๊ทธ ๋ค์๋ถํฐ๋ blue๋ก ๋์จ๋ค.๐๐ปโ๏ธ
- ๋ชฉํ โ
- ๊ธ์๋ฅผ ๋๋ฅด๋ฉด ๐ต, ํ๋ฒ ๋ ๋๋ฅด๋ฉด ๐ ์์ผ๋ก ๋ณํ๊ฒ
function handleTitleClick() {
if(h1.style.color === "cornflowerblue") {
h1.style.color = "tomato";
}else {
h1.style.color = "cornflowerblue";
}
}
h1.addEventListener("click", handleTitleClick);
- ์กฐ๊ธ ๋ ๋ฐ์ ๋ ๋ฒ์ (๋ณ์์ ๊ฐ ์ ์ฅํ๊ธฐ)
function handleTitleClick() {
const currentColor = h1.style.color;
let newColor; // new color๋ ์๋ฌด๊ฒ๋ ์๋ ๋น์ด์๋ ๋ณ์
if(currentColor === "cornflowerblue") {
newColor = "tomato";
}else {
newColor = "cornflowerblue";
}
h1.style.color = newColor;
๐
/**
๐ ์กฐ๊ฑด๋ฌธ๊น์ง๋ง ์คํํ๋ฉด ์ฐ๋ฆฌ h1์๊ฒ๋ ์๋ฌด์ผ๋ ์ผ์ด๋์ง ์๋๋ค.
๋ฐ๋ผ์ ๊ฐ์ ํ ๋นํด์ฃผ์ด์ผ ํ๋ค.
*/
}
h1.addEventListener("click", handleTitleClick);
๐ฑ CSS in Javascript 2๏ธโฃ
๐ element์์ className ๋ณ๊ฒฝ, ์ ๊ฑฐ, ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ(๋งค์ฐ ์ถ์ฒ๋๋ ๋ฐฉ๋ฒ์ โ)
- ์์ ์ฝ๋
- ํด๋ฆญ ์ ๊ธ์ ์์ ๋ณ๊ฒฝ
/* CSS์ฝ๋ */
h1 {
color: cornflowerblue;
}
.active {
color: tomato;
}
// JS์ฝ๋
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
h1.className = "active";
}
h1.addEventListener("click", handleTitleClick);
// ๊ฒฐ๊ณผ : ํด๋ฆญ → ๊ธ์์์ด ๐ต → ๐
- ๋ชฉํ โ → ํด๋ฆญํ๋ฉด ๐ต → ๐ ๋๊ณ , ๋ค์ ํด๋ฆญํ๋ฉด ๐ → ๐ต ๋๋๋ก!
function handleTitleClick() {
if( h1.className === "active") {
h1.className="";
}else {
h1.className = "active";
}
}
h1.addEventListener("click", handleTitleClick);
/**
๊ฒฐ๊ณผ : ๋ชฉํ๋๋ก ๋์ํจ,
butโ active๋ผ๋ string ๋ฐ๋ณต์ฌ์ฉ => error์ ์์ง๐ฑ
*/
- ๐ฅ ๊ฐ์ ๋ ๋ฒ์ ๐๐ปโ๏ธ - ์กฐ๊ฑด๋ฌธ ์ฌ์ฉ โ Class๋ฅผ ๋ณ์๋ก ์ ์ฉ
function handleTitleClick() {
const clickedClass = "clicked"
/**
์ด๋ ๊ฒ ๋ณ๊ฒฝ! ๐ ํ ๋ฒ๋ง ๋ณต๋ถํ๋ฉด ๋์ error๊ฐ๋ฅ์ฑ ↓,
๋ํ ๋ณ์๋ฅผ ์๋ชป์ฐ๋ฉด console์์ ์๋ ค์ฃผ๊ฒ ๋จ : ์ค์ ํ๋ฅ ↓
*/
if( h1.className === clickedClass) {
h1.className="";
}else {
h1.className = clickedClass;
}
}
- ClassName์ ๋ฌธ์ ์ โ ๐ฑ
- ๋ง์ฝ element์ ์ด๋ฏธ class๊ฐ ์กด์ฌํ ๊ฒฝ์ฐ
→ event ์คํ ํ์๋ ๊ธฐ์กด์ class๊ฐ ์ฌ๋ผ์ ธ ๋ฒ๋ฆฐ๋ค.
- ๋ง์ฝ element์ ์ด๋ฏธ class๊ฐ ์กด์ฌํ ๊ฒฝ์ฐ
<div><h1 class="sexy-font">Click me!</h1></div>
<!-- ์ฌ๊ธฐ์ ํด๋ฆญ ์ className์ด "cliked"๊ฐ ๋๋ ์ฝ๋๋ฅผ ์คํํ๋ฉด -->
๐
<div><h1 class="clicked">Click me!</h1></div>
<!-- ์ด๋ ๊ฒ ๋์ด๋ฒ๋ฆฐ๋ค๐ฅ → ๋ค๋ฅธ ๋ฐฉ๋ฒ ํ์ํจโ-->
๐ฑ CSS in Javascript 3๏ธโฃ
๐ Class ์ ์ฒด๋ฅผ ๊ต์ฒดํ๋ ๊ฒ์ด ์๋ ์๋ ์ํ์ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ
- โจClassListโจ
- element์ classs๋ด์ฉ๋ฌผ์ ์กฐ์ํ๋ ๊ฒ์ ํ์ฉ๐โ๏ธ
- 'contains' ์ธ ์ ์๋ค → class๊ฐ ํฌํจ๋์ด ์๋์ง ํ์ธ
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
const clickedClass = "clicked";
if( h1.classList.contains(clickedClass)) {
h1.classList.remove(clickedClass);
}else {
h1.classList.add(clickedClass);
}
}
/**
์ด์ font class๋ ๊ทธ๋๋ก ์ ์ฉ๋ ์ํ์์
"clicked" class๋ ์ ์ฉ๊ฐ๋ฅํ๋ค.
*/
- ์ต์ข
Upgrade ๋ฒ์ ๐ → toggle ์ฌ์ฉ
- ํ ํฐ์ toggle ํ๋ค : ํ ํฐ์ด ์์ผ๋ฉด ์ ๊ฑฐ, ์์ผ๋ฉด ์ถ๊ฐ
ex. ๋ถ ๋๊ธฐ - ์ผ๊ธฐ, ์ค๋งํธํฐ Lock - Unlock
- ํ ํฐ์ toggle ํ๋ค : ํ ํฐ์ด ์์ผ๋ฉด ์ ๊ฑฐ, ์์ผ๋ฉด ์ถ๊ฐ
function handleTitleClick() {
h1.classList.toggle("clicked");
}
// ๋งค์ฐ ๊ฐ๋จํ๊ฒ ๋์ผํ ๊ธฐ๋ฅ ์คํ๊ฐ๋ฅ๐
- ๋ฌผ๋ก toggle์ ๋จผ์ ๋ฐฐ์๋ ์ข์๊ฒ ์ง๋ง, ์์ ๊ธฐ๋ฅ์ ์์์ผ toggle์ ํธ๋ฆฌํจ์ ๊ฐ๋ ฌํ๊ฒ ๋๋ ์ ์๋ค.๐ค
๋ฐ์ํ