沿 X 轴平移元素的所有子元素

Question

我想平移给定元素的所有子元素，例如沿 X 轴平移 100 像素。

一些警告：

1. 我不想使用任何 jQuery 或其他库，因为我在一个应该是独立的库中使用它（如果可能的话）
2. 这将完全适用于 Chromium。事实上，我更喜欢使用 -webkit-transform:translate(...) 而不是我现在正在做的事情（因为 -webkit-transform 甚至可以工作没有相对定位）

我目前可以使用以下丑陋的、hacky 代码让它工作：

function translateElementChildrenBy(element, translation)
{
    var children = element.children;
    for(var i = 0; i < children.length; ++i)
    {
        var curPos = parseInt(children[i].style.left);
        if(isNaN(curPos)) curPos = 0;
        children[i].style.position = "relative";
        children[i].style.left = "" + (curPos + translation);
    }
}

translateElementChildrenBy(document.body, 100);

有没有更好的（阅读：更干净的）方法来完成这个？或者，更好的是，有没有一种方法可以仅使用 -webkit-transform （即没有position:relative）来完成此任务？

谢谢。

Answer 1

有一个名为 webkitTransform 的 JS 属性，它包含变换的实际 CSS 声明（“rotate(30deg)”、“translate(10px, 20px)”等），但每次使用正则表达式读取它可能不是最快的因此，您不妨将当前的翻译存放在新的属性中。

function translateElementChildrenBy(element, translation)
{
    var children = element.children;
    for (var i = 0; i < children.length; ++i)
    {
        var child = children[i];
        var currentTranslation = child._currentTranslation || 0;
        child._currentTranslation = currentTranslation + translation;
        child.style.webkitTransform = "translate(" + child._currentTranslation + ")";
    }
}

translateElementChildrenBy(document.body, 100);

这假设所讨论的元素不会有任何其他转换集 - 否则，事情会变得有点棘手，您需要确保其他转换不会被删除（同样，最好通过记住所有其他转换属性作为 JS 属性，因为解析声明有点棘手，而且肯定没有那么快）。