728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS연습</title>
</head>
<body>
<ul id="gnb">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button onclick="inithtml()">사이트 폭파 버튼</button>
<script>
window.onload = init;
const textcolor = [
{
color: "green",
bg: "red",
nm : "네이버"
},
{
color: "yellow",
bg: "darkblue",
nm: "다음"
},
{
color: "blue",
bg: "green",
nm: "쿠팡"
},
{
color: "black",
bg: "orange",
nm: "구글"
}
]
function init() {
for (x in textcolor) {
insectlist(x, textcolor[x].nm, textcolor[x].color, textcolor[x].bg)
}
// insectlist(0,"구글");
// insectlist(1,"네이버");
// insectlist(2,"다음");
// inithtml();
}
function insectlist(a, b, c, d) {
var listItem = document.querySelectorAll('#gnb li')[a];
listItem.innerHTML = b;
listItem.style = `
color: ${c};
background-color: ${d};
`;
}
function inithtml() {
document.body.innerHTML = ''
}
</script>
</body>
</html>
→ 이렇게 백틱으로 js에서 스타일을 여러개 지정하면transition 줄때 시간차로 오류나는걸 확인함 !
원인은 style이라는 객체가 초기화되면서 나는 원인!
하여튼 style은 귀찮아도 따로따로 쓰자 !
반응형
'JavaScript' 카테고리의 다른 글
| ★ 객체 값 바꾸기에 대한 오해와 해결 (0) | 2024.01.02 |
|---|---|
| JS 구조분해 할당. (0) | 2024.01.02 |
| 일반함수 vs 화살표함수 (0) | 2023.12.26 |
| 실수많이하는 onClick 함수 실행식 (0) | 2023.12.18 |
| [JS 완전가이드] 타입, 값, 변수 요약 (1) | 2023.10.17 |
댓글