Операторы присваивания Javascript с преобразованием

Question

если у меня есть элемент, и я хочу перевести его на 50 пикселей больше, чем текущее значение. Почему я не могу сделать что-то вроде этого?

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, может легко перемещать элемент на 50 пикселей.

Answer 2

Если ваше преобразование установлено в таблице стилей, element.style.transform вернет пустую строку. Вы должны использовать getComputedStyle.

Чтобы получить й перевод в виде целого числа использования:

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

затем использовать это, чтобы увеличить на 50 пикселей:

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

Вот скрипка: https://jsfiddle.net/uhuh9r64/

Answer 3

translateX () является функцией 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; 
}