Получите доступ к сдвигам преобразования CSS3 с помощью JavaScript

Question

Я использую JavaScript для перемещения элемента с помощью функции translate свойства -webkit-transform:

node.style.WebkitTransform = "translate(" + leftPos + "px, 0px)"

Значение leftPos вычисляется во время выполнения.

В другом методе я хочу переместить этот узел из его текущей позиции.Этот метод не знает значение lastPos.

Как получить значение leftPos из DOM, не отслеживая его?

Один очевидныйРешение разбирает значение свойства:

node.style.WebkitTransform; // returns "translate(-Xpx, 0px)"

Я могу разобрать это, но это не кажется оптимальным.

Answer 1

Лично я бы так не поступил, см. Предостережения, почему.

Тем не менее, это возможно. Интерфейсы не очень хорошо известны, поэтому я объясню, как это делается для всех, кто интересуется.

Как это сделать

Вы можете получить доступ к свойству напрямую, просматривая интерфейсы DOM для CSS-преобразований, в частности CSSTransformValue (WebKitCSSTransformValue в WebKit), через которые вы можете получить доступ к параметрам для функции преобразования:

leftPos = node.style.getPropertyCSSValue('-webkit-transform')[0][0].getFloatValue(CSSPrimitiveValue.CSS_PX);

Давайте разберемся с этим и рассмотрим соответствующие интерфейсы:

• getPropertyCSSValue('-webkit-transform') & rarr; CSSValueList. (Все преобразования установлены на элемент.)
  • [0] & rarr; WebKitCSSTransformValue (Первая функция преобразования, примененная к этому элементу.)
    • [0] & rarr; CSSPrimitiveValue (Первый аргумент функции translate.)

Предостережения

• Моим личным предпочтением было бы просто сохранить свойство где-то (например, атрибут data-* в элементе) или даже использовать регулярное выражение в значении свойства, и, возможно, использовать анимацию WebKit, чтобы сделать тяжелую работу за вас. , Доступ к нему таким образом утомителен, грязен и включает в себя треккинг по некоторым менее проходимым путям через DOM.

• Этот метод не будет работать в Firefox , даже если вы используете -moz-transform. Mozilla поддерживает только getPropertyCSSValue по результатам getComputedStyle; это дает вам матрицу преобразования, в этом случае вы будете использовать window.getComputedStyle(el).getPropertyCSSValue('-webkit-transform')[0][4].getFloatValue(CSSPrimitiveValue.CSS_PX) для доступа к значению translate-X. (Предполагается, что это единственное примененное преобразование.)

• W3C говорил о устаревших этих интерфейсах в течение многих лет в пользу CSSOM . Прогресс в этом направлении был на момент написания , но это уже не так - caveat emptor !

Answer 2

Может быть, jQuery может вам помочь: jQuery: offset () .

РЕДАКТИРОВАТЬ: jQuery: position () это то, что вы хотите