Перевести все дочерние элементы элемента по оси X - PullRequest
Новая
       28

Перевести все дочерние элементы элемента по оси X

1 голос
/ 26 июля 2011

Я хотел бы перевести все дочерние элементы данного элемента, скажем, на 100 пикселей вдоль оси X.

Пара предостережений:

  1. Я бы предпочел не использовать никакие jQuery или другие библиотеки, так как я использую это в библиотеке, которая должна быть автономной, если это возможно
  2. Это будет полностью для Chromium. На самом деле, я бы предпочел использовать -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 (т.е. без позиции: относительный)?

Спасибо.

1 Ответ

1 голос
/ 01 августа 2011

Существует свойство JS, называемое webkitTransform, и оно содержит фактическое объявление 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, потому что анализ объявления немного сложен и, конечно, не так быстр).

...