Javascript — 添加转换：转换为现有样式答案

【问题标题】：Javascript — Add transform : translate to existent styleJavascript — 添加转换：转换为现有样式
【发布时间】：2018-02-21 09:19:49
【问题描述】：

在一个项目中，我使用 Javascript 对多个元素进行自定义 translateY 转换。

我现在面临的问题是，当其中一些元素的 CSS 样式中已经有 translateX(value) 时，向多个元素添加 translateY(value)。

当然，el.style.transform = translateY(value) 实际上是 erase transform: translateX(value); CSS 属性。有没有办法在纯 Javascript 中添加/合并translateY 到现有的translateX？

提前致谢

【问题讨论】：

我实际上可能找到了一个解决方案，但没想到那样——在 javascript 中获取 CSS 属性并将“矩阵”属性转换为值 > css-tricks.com/get-value-of-css-rotation-through-javascript

标签： javascript css transform

【解决方案1】：

如果此样式作为对象呈现：

Object.assign(el.style.transform,translateY(value));

它将为现有对象添加新样式。

如果是字符串属性 - 使用字符串连接。

【讨论】：

感谢您的回答罗伯特，这并不是我真正想要的，但在另一种情况下可能会有所帮助！我找到了一个完美的解决方案，我会在这里为那些面临同样问题的人发布:)

【解决方案2】：

所以我终于找到了使用getComputedStyle() 函数的解决方案。以下代码正在查找任何 translateY 值，如果是，它将对目标元素应用不同的变换样式。

let l = window.getComputedStyle(el, null),
    t = l.getPropertyValue('transform')

    // If t return other than "none"
    // Split content into several value
    // The fourth one is the translateX value

    if(t != 'none') {
        let v = t.split('(')[1],
            w = v.split(')')[0],
            x = v.split(',')

        el.style.transform = 'translate(' + x[4] + 'px, -' + d / m + '%)'
    } else {
        el.style.transform = 'translate('+ 0 + 'px, -' + d / m + '%)'                   
    }

【讨论】：