How to return a javascript set style property to CSS default

Question

I'm trying to work out how, after changing style properties with javascript, I can revert to the value in the stylesheet (including the units).

In the example below, I'd like the output to read 100px (the value in the CSS), rather than 10px, as getComputedStyle gives.

I'd also keep the dummy div at top:25px, so removing the style property won't work.

The best I have is cloning the node and reading the height and storing in a property (http://jsfiddle.net/daneastwell/zHMvh/4/), but this is not really getting the browser's default css value (especially if this is set in ems).

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>

Why can't you use CSS classes? Then you'll simply add/remove them instead of changing individual style properties. — Adriano Repetti
– Adriano Repetti, Commented May 22, 2012 at 9:08
Moreover actually the current value for left is 10px because getComputerStyle returns the...computed style of that element (including style attribute) and not only the rules specified in the CSS. Note: be aware that getComputedStyle isn't supported on older versions of IE. — Adriano Repetti
– Adriano Repetti, Commented May 22, 2012 at 9:22
I'm performing a task on resize, so the 'left' value is calculated, so a class wouldn't help, sorry for not having been more specific. — Dan Eastwell
– Dan Eastwell, Commented May 23, 2012 at 8:39

abaelter · Accepted Answer · 2012-05-22 09:15:02Z

35

Just clear the inline style you wish to fallback to original stylesheet on.

elem.style.left = null;

answered May 22, 2012 at 9:15

abaelter

9272 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dan Eastwell Over a year ago

Exactly what's required, to revert the style back to the CSS value.

thdoan Over a year ago

I would set it to '' (empty string) to be consistent with the return value given by JavaScript.

interphx Over a year ago

Using '' also makes it compatible with TypeScript.

Community · Accepted Answer · 2017-05-23 11:45:23Z

8

The style object has a built-in removeProperty() method, so you could do something like:

elem.style.removeProperty('left');

As far as I know, this will have exactly the same effect as setting the property to null, as abaelter suggested. I just thought it might be worth including for the sake of completeness.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Nov 30, 2014 at 23:08

DoctorDestructo

4,40231 silver badges44 bronze badges

1 Comment

Dan Eastwell Over a year ago

Looks good - seems it's IE9 up in terms of support quirksmode.org/dom/w3c_css.html#t45.

wm.wragg · Accepted Answer · 2012-05-22 19:32:42Z

2

Combining abaelter's answer and http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ gives us the below function:

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;
}

Placing in your example code and testing:

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

Gives us getCssStyle: 100px allowing you to see the original CSS value. If you just want to revert the value then do as abaelter says and null the CSS value you want to revert.

edited May 22, 2012 at 19:32

answered May 22, 2012 at 17:57

wm.wragg

1531 silver badge7 bronze badges

2 Comments

Dan Eastwell Over a year ago

Great, this would be useful if you needed to know the value in the CSS only without altering the state of the element. As I need to revert to the CSS value, @abaelter's response is the one I'll use.

wm.wragg Over a year ago

Yep I realised that after I wrote the function, but thought it might be useful.

Collectives™ on Stack Overflow

How to return a javascript set style property to CSS default

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related