Question

在项目中，我使用Javascript将自定义translateY转换为几个元素。

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

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

提前致谢

Answer 1

如果此样式显示为对象：

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

更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

它会向现有对象添加新样式。

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

更多信息：https://www.w3schools.com/jsref/jsref_concat_string.asp

Answer 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 + '%)'                   
    }

Javascript - 添加转换：转换为现有样式

2 个答案: