沿X軸翻譯元素的所有子代

Question

我想翻譯給定元素的所有孩子，例如沿着X軸100個像素。

需要注意幾個問題：

1. 我寧願不使用，因爲我在圖書館利用這一點，應儘可能是獨立的任何的jQuery或其他庫
2. 這將完全由鉻。其實，我更喜歡用-webkit-transform: translate(...)到現在我在做什麼的權利（因爲-webkit-transform會更加沒有相對定位）

我現在可以使它工作使用以下醜陋，哈克代碼：

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（即沒有位置：相對）完成這項工作？

謝謝。

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屬性的所有其他轉換屬性來完成，因爲解析聲明有點棘手，當然不會那麼快）。