Javascript赋值操作符与转换

Question

如果我有一个元素，我想把它比当前值多平移50px。为什么我不能这样做?

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

有这样的方法吗?

Answer 1

如果在样式表中设置了转换，则element.style.transform将返回一个空字符串。你必须使用getComputedStyle

要将x转换为整数，使用:

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

然后用这个来增加50像素:

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

这里有一个小提琴:https://jsfiddle.net/uhuh9r64/

Answer 2

JS不理解CSS，反之亦然，但是CSS可以自己解决这个问题。

大多数人都不知道，ECMAScript (JS的专有名称)规范和CSS和DOM标准由不同的小组维护，几乎没有互操作的能力。它们之间的大多数接口都是在JS调用API时发生的，但JS通常不会考虑或关心它调用的是什么API。

也就是说，JS没有显式支持CSS，并将其视为字符串。

当你可以使用纯CSS转换元素时，这并不重要，而不需要JS参与(尽管你可以从JS应用转换)。一个简单的位置变换，即使在2D中，也可以很容易地将元素向下移动50px。

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;
}