Get user-defined CSS values in JS

Question

I have two functions called slideDown, slideUp.

When I want to use the slideUp function, it's very convenient because I set the height, margin, padding values to 0.

But it's hard to use slideDown! Take a look at the following: (Unfortunately I can not preview the code)

Element.prototype.addAnimate = function(animateObj,timer=500,callback,hidden=false) {
    let oldStyle = {};
    let newStyle = {};
    let thisElement = this;
    this.style.display = 'block';
    if (typeof arguments[1] == 'function') {
        timer = 500;
        callback = arguments[1];
    } else if (typeof arguments[1] == 'number') {
        timer = timer;
        callback = callback;
    }
    for (styleName in animateObj) {
        let oldStyleValue = window.getComputedStyle(this,null).getPropertyValue(styleName.replace(/[A-Z]/g,'-$&').toLowerCase());
        oldStyle[styleName] = oldStyleValue;
        newStyle[styleName] = animateObj[styleName];
    }
    let animation = this.animate([oldStyle,newStyle],{
        duration:timer,
        fill:'forwards'
    });
    animation.onfinish = () => {
        if (callback && typeof callback == 'function') {
            callback();
        }
        if (hidden == true) {
            thisElement.style.display = 'none';
        }
    }
}

(The addAnimate function is used to set animate on elements that uses api animation)

Element.prototype.slideUp = function() {
    let timer = (typeof arguments[0] == 'number') ? arguments[0] : 250;
    let callback = (typeof arguments[1] == 'function') ? arguments[1] : arguments[0];
    this.addAnimate({
        overflow:'hidden',
        height:'10px',
        marginTop:0,
        marginRight:0,
        marginBottom:0,
        marginLeft:0,
        paddingTop:0,
        paddingRight:0,
        paddingBottom:0,
        paddingLeft:0,
    },timer,callback,false);
}

(As I said, using the slideUp function is not a problem for me)

Element.prototype.slideDown = function() {
    let timer = (typeof arguments[0] == 'number') ? arguments[0] : 250;
    let callback = (typeof arguments[1] == 'function') ? arguments[1] : arguments[0];
    this.addAnimate({
        height:'auto',
        marginTop:'auto',
        marginRight:'auto',
        marginBottom:'auto',
        marginLeft:'auto',
        paddingTop:'auto',
        paddingRight:'auto',
        paddingBottom:'auto',
        paddingLeft:'auto',
    },timer,callback);
}

The main problem with this function is how to get values that are already set (such as the slideDown function in Jquery). When I set the values to the auto, the styles apply without animation. (I do not want to use Jquery)

The title of your question [has already](https://stackoverflow.com/questions/9730612/get-element-css-property-width-height-value-as-it-was-set-in-percent-em-px-et) [been answered](https://stackoverflow.com/questions/744319/get-css-rules-percentage-value-in-jquery) deceptively, however it seems it's not what you are after, but I'm not sure to get what it is actually. I think we'll need some more context such as a bit of HTML markup and CSS rules to understand what these values are relative to and what exactly you want. — Kaiido, Jul 10 '19 at 05:46

score 0 · Answer 1 · answered Jul 10 '19 at 06:07

The trick here is to keep the default styles value of your element somewhere before the first update. You could also use element.removeAttribute('style') (doc here)

Here's a basic example:

let toggle = false;
const elem = document.querySelector('.no-auto');
const defaultStyles = { // Get default styles
  width: elem.style.width,
  height: elem.style.height,
  backgroundColor: elem.style.backgroundColor,
};

function toggleAnimate() {
  toggle = !toggle;
  const styles = elem.style;

  if (toggle) {
    styles.width = '60px';
    styles.height = '50px';
    styles.backgroundColor = 'blue';
  } else {
    styles.width = defaultStyles.width;
    styles.height = defaultStyles.height;
    styles.backgroundColor = defaultStyles.backgroundColor;
  }

}

elem.addEventListener('click', toggleAnimate);

.no-auto {
  width: 120px;
  height: 100px;
  background-color: red;
  transition: all 0.3s ease;
}

<div class="no-auto">
</div>

Get user-defined CSS values in JS

1 Answers1