getComputedStyle
ㄴ> 지금까지 node.style[prop] 으로 쓰고 있었는데 다르게도 쓸 수 있다는 말을 들었다! 무슨 차이인가 보자.
element.style[prop] getComputedStyle(element)[prop]엘리멘트 속성? 태그 내의 인라인으로 적용해준 속성
노드 자체에 스타일 속성으로 정의되어 있는 것.
태그 안에 스타일로 정의해준 것과 외부에서 스타일을 지정해준 것이 다르게 존재한다는 걸 알 수 있다. 이게 무슨 소린가 하고 찾아보니
그래서 외부에 적용된 속성들은 어떻게 가져오나? 이때 getComputedStyle()[] 을 쓴다.
getComputerStyle()[] : 엘리멘트에 최종적으로 적용된 모든 css 속성값을 담은 객체를 반환한다.
근데 여기서 또 궁금한 게
? getComputedStyle 로 가져오면 blue, red 가 아니라 rgb(,,) 로 불러오던데...
: html 에서 색을 다룰 때는 16진수 Hex, 컬러이름, rgb 세 가지로 다루는데 브라우저에 최종적으로 색을 적용할 때는 이름 말고 hex나 rgb로 적용한다.
그럼 또 여기서 알 수 있다. style 로 가져오면 'blue'로 가져오는 이유는 최종적으로 적용된 게 아니라 엘리멘트 자체에 적용된 걸 가져오는 거라서, getComputedStyle 로 가져오면 rgb로 가져오는 이유는 최종 적용된 걸 가져오는 거라서 라는 말이다.
함수 옵션 정의
함수 매개변수에 옵션 설정해주는 거 하고 있는데 지금은 조건문으로 얘 타입이 string 일 때 등등 나눠주고 있는데
node:HTMLElement | string, prop: keyof CSSStyleDeclaration
타입 스크립트에서는 이렇게 할 수 있대.. 이거 짱이다.. 😯- 옵셔널 파라미터
매개변수 중에 받아도 좋고 안 받아도 괜찮은 걸 옵셔널 파라미터라고 한다.
자바스크립트에서는 에서는 기본값을 주고 타입스크릴트는 ? 를 붙여주면 된다.
- 앞에 거 무시하고 다음 매개변수만 주고 싶을 때
function(, , a) 매개변수 순서는 정해져 있기 때문에 이렇게 _ 언더바를 이용해서 안 쓴다고 표시해준다! 값이 안 들어가는 것은 아님!
객체를 배열로 만들자
argument -> array
const arr = [ ...arguments]
const arr = Array.from(arguments)
const arr = Array.prototype.slice.call(arguments);refer
