Javascript Assignment 요소가있는 경우 변환이

Question

인 연산자가 있는데 현재 값보다 50px 이상을 변환하려고합니다. 왜 이렇게 할 수 있습니까?

element.style.transform="translateX(+=50px)" 

그런 식으로 할 방법이 있습니까?

Answer 1

JS는 CSS를 이해하지 못하고 그 반대의 경우도 있지만, CSS는 자체적으로이를 해결할 수 있습니다.

대부분의 사람들에게는 알 수 없지만 ECMAScript (JS 고유 이름) 사양과 CSS 및 DOM 표준은 서로 다른 그룹에서 유지 관리되며 상호 운용 능력이 거의 없습니다. 대부분의 인터페이스는 JS가 API를 호출 할 때 발생하지만 JS는 일반적으로 호출하는 API를 고려하거나 신경 쓰지 않습니다.

즉 JS는 CSS를 명시 적으로 지원하지 않으며 이것을 문자열로 간주합니다.

transform elements using pure CSS 일 때 JS가 관여 할 필요가 없어도 상관 없습니다 (JS에서 변환을 적용 할 수는 있지만). 2D에서도 쉽게 위치를 변환 할 수 있으므로 요소를 50px 아래로 쉽게 이동할 수 있습니다.

Answer 2

변환이 스타일 시트에 설정된 경우 element.style.transform은 빈 문자열을 반환합니다. getComputedStyle을 사용해야합니다.

var transform = parseInt(window.getComputedStyle(element, null).transform.split(',')[4]); 

그럼 50 픽셀 씩 증가 할 때 사용 :

정수 용도로 X 변환 얻으려면 https://jsfiddle.net/uhuh9r64/

Answer 3

translateX (: 여기

element.style.transform = "translateX(" + (transform + 50) + "px)" 

은 바이올린 인)는 평면에서 요소를 수평으로 이동시키는 데 사용되는 CSS 함수입니다. 이 변환은 수평으로 얼마나 움직이는 지 정의하는 length으로 정의됩니다. 샘플 코드 예제

exm.html

<div> 
    <p>welcome</p> 
    <p class="transformed">bar</p> 
    <p>thanks</p> 
</div> 

exm.css

p { 
    width: 50px; 
    height: 50px; 
    background-color: teal; 
} 

.transformed { 
    transform: translateX(10px); 
    background-color: blue; 
}