본문 바로가기

Webstoryboy

Category

Explanation

GSAP/Alphabet

gsap.getProperty()

gsap.getProperty()

gsap.getProperty() 메서드는 요소의 속성 값을 가져옵니다. 단위를 적지 않으면 숫자만 반환되고, 단위를 적으면 단위까지 같이 나옵니다. 값이 없을 경우 null을 반환합니다.


gsap.getProperty()

gsap.getProperty() 메서드는 요소의 속성 값을 가져옵니다.

특징 설명
버전 GSAP3
결과값(return) 모든 속성 값(*)
사용성 ★★★☆☆

문법(Syntax)

gsap.getProperty("타겟", "속성");

gsap.getProperty("#id", "x");              // #id의 x 속성 값을 반환합니다. 20
gsap.getProperty("#id", "x", "px")              // 단위를 적으면 단위 값을 반환합니다. "20px"
gsap.getProperty("#id", "backgroundColor")      // 백그라운드 컬러 속성 값을 반환합니다. "rgb(255, 128, 0)"
  • 타겟(targets) : 애니메이션을 적용할 개체를 선택합니다. (CSS 선택자, Javascript 선택자 가능)
  • 속성(values) : 애니메이션과 관련된 속성을 설정합니다.

정의(Definition)

  • gsap.getProperty() 메서드는 요소의 속성 값을 가져옵니다.
  • gsap.getProperty() 메서드는 가져온 요소의 단위 값을 특정짓거나 변경 할 수 있습니다.
  • gsap.getProperty() 메서드는 단위 값을 생략한다면 number를 가져옵니다. 속성 값이 20px이라면 parseFloat()로 20으로 변경해야 하지만 gsap.getProperty()는 이런 성가로운 부분을 해결해줍니다.

비교(Compare)

  • 자바스크립트에서는 getAttribute() 메서드를 이용하여 속성 값을 가져옵니다.
  • 제이쿼리에서는 .attr() 메서드를 이용하여 속성 값을 가져옵니다.

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
gsap.getProperty()

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기