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 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
gsap.getProperty() | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |