๐Ÿ’ก ํ”„๋ก ํŠธ์—”๋“œ/Javascript 2

[Javascript] className, classList, ๊ทธ๋ฆฌ๊ณ  toggle!

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ style๋ฅผ ๋ฐ”๊พธ๊ณ  ์‹ถ์„ ๋•Œ ๋ฐ”๋กœ. style๋กœ ๋ณ€๊ฒฝํ•ด๋„ ๋˜์ง€๋งŒ, ์ฝ”๋“œ๋„ ๊ธธ์–ด์ง€๊ณ  ๋ฌด์—‡๋ณด๋‹ค JSํŒŒ์ผ์—์„œ CSS๋ฅผ ์“ฐ๊ณ  ์žˆ๋‹ค๋Š” ๊ฒŒ ๋งˆ์Œ์— ๊ฑธ๋ฆฐ๋‹ค. ์ด๋Ÿด ๋•Œ๋Š” ๋ฏธ๋ฆฌ css ํŒŒ์ผ์— ๋ณ€๊ฒฝํ•ด๋‘˜ ์Šคํƒ€์ผ์„ ์ง€์ •๋œ ์ด๋ฆ„์œผ๋กœ ์„ ์–ธํ•ด๋‘๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ class๋ฅผ ๋ณ€๊ฒฝ๋งŒ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค! 1. className className์€ HTML์—์„œ ๋ถˆ๋Ÿฌ์˜จ Element์˜ class ์ด๋ฆ„์„ css์—์„œ ์ง€์ •ํ•œ ์„ ํƒ์ž ์ด๋ฆ„์œผ๋กœ ๋ณ€๊ฒฝํ•œ๋‹ค. Element๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์€ document.getElementsByClassName์ด๋‚˜ querySelector๋กœ ๊ฐ€์ ธ์˜จ๋‹ค. // Javascript function changeStyle() { ๊ฐ€์ ธ์˜จElement.className = "๋ณ€๊ฒฝํ•  ์ด๋ฆ„"; } // CSS .๋ณ€๊ฒฝํ•  ์ด..