오늘은 문제를 풀다가 classList 복습차원에서 인강을 겸하지 않고 혼자서 글자색이 내가 지정한 색일때 배경색을 바꿔주는 코드를 짜 보았다. 코드를 올리고싶지만 문제를 배포해주는곳에서 수업내용과 비슷한 종류의 내용은 배포금지. 개인블로그에 작성 금지라고 하셔서 안타깝게도 올리지 못 하여 아쉽다 ㅠㅠ
하지만 이번에 혼자 코드를 짜보면서 이것저것 만들다보다가 새로운 것을 하나 알게되어 TIL에 올릴수있게 되었다.
1.getComputedStyle()
이 메소드는 js 내에서 inline으로 작성한 스타일이 아닌
외부에서 작성한 즉, css파일에 작성한 요소 값을 가져올 수 있는 메소드 이다.
메소드 사용법은
window.getComputedStyle(XXX).style요소작성예를 들어
window.getComputedStyle(XXX).color;
window.getComputedStyle(XXX).backgroundColor;
처럼 여러가지 요소들을 작성할 수 있다
나는 이 메소드를 사용하게 된 이유가
글자색이 내가 지정한 색일때 배경색상을 바꿔주는 코드를 짜는데 h1 innerText에 변경된 배경색상의 이름을 알려주고싶은 마음에 찾아보게 되었다.
불어오고싶은 값을 정의하기위해 const로 작성하여주고
함수내에서 코드를 작성하여준다.
실행결과
아래와 같이 출력되긴하나 내가 원하던바인 Orange나 Yellow가 아닌 rgba 색상번호로 출력되어서 조금 아쉬웠다.
