Как вернуть свойство стиля javascript в CSS по умолчанию

Я пытаюсь понять, как после изменения свойств стиля с помощью javascript я могу вернуться к значению в таблице стилей (включая единицы).

В приведенном ниже примере я хотел бы, чтобы результат читал 100px (значение в CSS), а не 10px, как getComputedStyle.

Я также сохранил бы фиктивный div в top:25px, поэтому удаление свойства style не будет работать.

Самое лучшее, что у меня есть, это клонирование node и чтение высоты и сохранение в свойстве (http://jsfiddle.net/daneastwell/zHMvh/4/), но это на самом деле не получает значение CSS по умолчанию для браузера (особенно если оно установлено в em s).

http://jsfiddle.net/daneastwell/zHMvh/1/

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    elem.style.left = "10px";
    elem.style.top = "25px";
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("left");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

Ответ 1

Просто очистите встроенный стиль, который вы хотите отменить в исходной таблице стилей.

elem.style.left = null;

Ответ 2

Объект стиля имеет встроенный метод removeProperty(), поэтому вы можете сделать что-то вроде:

elem.style.removeProperty('left');

Насколько я знаю, это будет иметь тот же эффект, что и установка свойства null, поскольку abellter предложил. Я просто подумал, что это может быть полезно для полноты.

Ответ 3

Объединяя abaelter answer и http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ дает нам следующую функцию:

var getCssStyle = function(elementId, cssProperty) {
  var elem = document.getElementById(elementId);
  var inlineCssValue = elem.style[cssProperty];

  // If the inline style exists remove it, so we have access to the original CSS
  if (inlineCssValue !== "") {
    elem.style[cssProperty] = null;
  }

  var cssValue = "";
  // For most browsers
  if (document.defaultView && document.defaultView.getComputedStyle) {
    cssValue = document.defaultView.getComputedStyle(elem, "").getPropertyValue(cssProperty);
  }
  // For IE except 5
  else if (elem.currentStyle){
    cssProperty = cssProperty.replace(/\-(\w)/g, function (strMatch, p1) {
      return p1.toUpperCase();
    });
    cssValue = elem.currentStyle[cssProperty];
  }

  // Put the inline style back if it had one originally
  if (inlineCssValue !== "") {
    elem.style[cssProperty] = inlineCssValue;
  }

  return cssValue;
}

Размещение в вашем примере кода и тестирования:

console.log("getCssStyle: " + getCssStyle("elem-container", "left"));

Дает нам getCssStyle: 100px, позволяя вам увидеть исходное значение CSS. Если вы просто хотите вернуть значение, то сделайте так, как говорит abellter, и null значение CSS, которое вы хотите вернуть.