Pass CSS property as argument to JavaScript function

Question

I have a few nearly identical CSS animation functions for a JavaScript "class". The one I am posting below is for height, but I also have some for width, left, etc. It seems fairly redundant to me to have different functions for what is basically the same task, can I replace height in the function below with some kind of CSS property argument?

WindowItem.prototype.animateHeight = function(inElement, inTarget) {
    var selfCall = true;
    var currHeight = parseInt(inElement.style.height, 10);

    if (this.isExpanded) {
        if (currHeight < inTarget) {
            currHeight += ((inTarget-currHeight)>>3)+1;
            if (currHeight >= inTarget) {
                currHeight = inTarget;
                selfCall = false;
            }
        }
    }
    else {
        if (currHeight > inTarget) {
            currHeight -= ((currHeight-inTarget)>>3)+1;
            if (currHeight <= inTarget) {
                currHeight = inTarget;
                selfCall = false;
            }
        }
    }
    inElement.style.height = currHeight+"px";

    if (selfCall) {
        var self = this;
        setTimeout(function() {
            self.animateHeight(inElement, inTarget);
        }, 33);
    }
}

Edit: I probably should have also posted how I am calling this, I am not sure what to be passing the function to specify height in this example: this.animateHeight(this.imgWindow, 0);

I just edited my post, I don't quite understand what to do with your code, could you explain please? — asimes
– asimes, Commented Apr 16, 2013 at 5:12
if you want to use this one function for any property given, you can use a parameter this.animateProperty(this.imgWindow, 0, "height");, where WindowItem.prototype.animateHeight = function(inElement, inTarget, cssProperty) ... that's what i meant. unless I misunderstood the question — user2264587
– user2264587, Commented Apr 16, 2013 at 5:15
@user2264587 Just write this as a short answer, so asimes can accept it and future visitors can benefit from this too. — Christoph
– Christoph, Commented Apr 16, 2013 at 7:24

user2264587 · Accepted Answer · 2013-04-16 07:36:14Z

1

as I wrote in my comment:

if you want to use this one function for any property given, you can use a parameter

this.animateProperty(this.imgWindow, 0, "height");

where

WindowItem.prototype.animateHeight = function(inElement, inTarget, cssProperty)
...

and instead of

inElement.style.height

use

inElement.style[cssProperty]

answered Apr 16, 2013 at 7:36

user2264587

4742 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

Pass CSS property as argument to JavaScript function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related