X 축을 따라 요소의 모든 자식을 번역하십시오.

Question

주어진 요소의 모든 자식을 번역하고 싶습니다. 예를 들어 X 축을 따라 100 픽셀 씩 말하고 싶습니다.

주의의 몇 :

1. 내가 전적으로
2. 이 될 것입니다 가능하면 독립해야 내가 도서관에서 사용하고 어떠한 jQuery를 또는 다른 라이브러리를 사용하지 않으려는 것 크롬.
   : 사실, 나는

내가 현재는 다음과 같은 추한, 해키 코드를 사용하여 작업 할 수 있습니다 (-webkit-transform 이후에도 상대 위치없이 작동합니다) 내가 바로 지금 뭘하는지에 -webkit-transform: translate(...)를 사용하여 선호하는 것

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 속성이 있으며 변환 ("rotate (30deg)", "translate (10px, 20px)"등)의 실제 CSS 선언이 있지만 정규 표현식을 사용할 때마다이를 읽을 수 있습니다. 그렇게해야 할 일이 가장 빠르지 않아야합니다. 그러면 현재 부동산을 새로운 부동산에 숨길 수 있습니다.

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 속성으로 다른 모든 변환 속성을 암기하여 가장 잘 수행 할 수 있습니다.