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)

Answer 1

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>