Как получить актуальные стили?

Question

[Dark Hole]

Итак, пилю я, значит, анимационный движок. Для мощности захотел сделать, чтобы стартовая точка сама вычислялась.
Ну значит, написал следующий говнокод -

function getStyle(object, name) {
  return object.style[name] || getComputedStyle(object)[name];
}

Но тут выяснилась одна очень пренеприятная вещь - getComputedStyle не возвращает относительные значения. То есть если у нас стиль

div {
  position: absolute;
  left: 10%;
}

то мы получим на выходе нечто вроде 135px.
Еще больше проблем с auto

Итак, вопрос: как же получить эти треклятые актуальные стили?

Answer 1

[Денис]

В своё время вычислили, что значение в процентах возвращается, если у элемента свойству display установлено значение 'none'. В принципе, можно сделать такой хак:

function getStyle(el, styleProp) {
  var currentDisplay = el.style.display,
    val = null;
  el.style.display = 'none';
  if (el.currentStyle) {
    val = el.currentStyle[styleProp];
  } else if (window.getComputedStyle) {
    val = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
  el.style.display = currentDisplay;
  return val;
}
console.log(getStyle(document.querySelector('div'), 'left')); // 10%

Comments

[Dark Hole]

А что за el.currentStyle?

[Денис]

Dark Hole это для старых ослов. По привычке бывает пишешь, хотя на сегодняшний день о них пора забыть ))

[Dark Hole]

Денис: а нет ли хака для auto?)

[Денис]

Dark Hole: так вроде бы оно работает нормально