带转换的Javascript赋值运算符

如果我有元素，我想把它转换成比当前值高50px的值。为什么我不能这样做呢

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

---

有没有办法做到这一点？

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

大多数人都不知道，JS规范的ECMAScript专有名称以及CSS和DOM标准由不同的组维护，互操作能力很差。它们之间的大部分接口都是用JS调用API来实现的，但是JS通常不考虑或关心它调用的API。p> 也就是说，JS对CSS没有明确的支持，并将其视为字符串

---

尽管可以应用来自JS的转换，但在不需要涉及JS的情况下，这并不重要。一个简单的位置变换，即使在2D中，也可以轻松地将元素向下移动50像素。

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

要将x转换为整数，请使用：

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

然后使用此选项增加50个像素：

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

---

这里有一个提琴：

translateX是一个css函数，用于在平面上水平移动元素。此转换由定义其水平移动量的长度定义。下面的示例代码示例是为您准备的

exm.html

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

---

但是你可以解析这个字符串。@Feathercrown这是一个很糟糕的选择，因为还有其他选项。我使用TweenMax，只是做了x=+=100px，你可能知道他们是怎么做的吗？@ssube但是如果在这种情况下这是他唯一的选项呢？很可能不是，但它可以be@Matija你应该检查他们的来源。他们很可能在自己的代码中管理所有属性，这是可能的，但代价高昂且容易出错。这不会修改OP明确要求的现有转换：我希望将其转换为比当前值高50px的值

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

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