p5js로 인터렉티브 흉내내기

이게dom..?이라는 건가...

디비드킴 2021. 4. 22. 22:32

잠깐 글 순서를 멈추고 급하게 찾은 기능인데
너무 신기해서 쓰려고 한다

야간 모드가 필요했다
밤이 되면 배경이 검은색이 돼서
글자가 식별이 어려워서
이것저것 찾아봤다.
그 와중에
corearoot.tistory.com/3

JavaScript와 CSS의 만남1 (객체의 색상 변경)

[li태그를 추출하여 글자색을 변경함] function test2() { var li = document.getElementsByTagName('li'); for(var i = 0; i li[i].style.color = '#f00'; } } window.onload = test2; Introduction there are nu..

corearoot.tistory.com

진짜 깜짝 놀랐다..
내가 상상만 했던 일이 되는 것이었다 ㅋㅋㅋㅋㅋㅋㅋ
저런 걸 dom..?이라고 하던 거 같던데 어쨌든!

내가 하려던 기능은 이것이다!

야간모드 gif라 끊긴다


이렇게 마우스 커서가 화면 안에 들어오면 야간 약 7시 이후에는 글자들에 불빛이 들어오는 것!
이전 코드는 이렇게 된다!

if(hours>=19||hours <=6)
{
var array=["box","box2","box3","box4","box5","box6","box7"];
for(var i=0; array.length;i++)
{
var text = document.getElementById(array[i]);
}
}

이렇게 되면 문제가 내가 색깔을 바꿀 모든 div혹은 태그에 모두 저렇게 "boxn"이라고 해줘야 하고
심지어 a태그 같은 곳엔 먹지도 않는다 ㅋㅋㅋ
자 생활코딩님이 항상 말씀했던 것 +내 경험
만약 1억 줄이라면..?
진짜 1억 줄이 뭐야 div태그가 100개 아니 10개만 돼도.... 끔찍하다..

그래서 찾아봤다 분명히 있을 건데 하고
아니나 다를까

var div =document.getElementsByTagName('div');

document.getElementsByTagName();
기가 막힌 기능을 찾았고!

더 놀라운 건
var a = document.getElementsByTagName('a');
for(var i = 0; i<a.length; i++)
{
a[i].style.color = 'white';
}
}
이게 가능했다 ㅋㅋㅋㅋa.length 라니 ㅋㅋㅋㅋㅋㅋㅋㅋ
신세계였다 진짜 ㅋㅋㅋㅋㅋ

그래서 만든 코드는!
var a = document.getElementsByTagName('a');///신세계이다
var div =document.getElementsByTagName('div');
var tags=[a,div];
for(var ii=0;ii<tags.length;ii++)
{
for(var i = 0; i<tags[ii].length; i++)
{
tags[ii][i].style.color = 'white';
}
}
}
요렇게 해주었다 잘 작동된다..
진짜 대단하다!
자바스크립트... 도대체 넌...