Can i use element's own property as argument for a plugin call?

Question

I am implementing the slim scroll plugin on my page (it converts default scrollbars on scrollable divs into prettier ones), and the implementation call, as per their example, goes like this:

$('#inner-content-div').slimScroll({
   height: '250px'
});

Since i have a need for more scrollable divs of different heights, i would need to call this plugin several times, passing different height as an argument each time.

To minify so much code, make it more readable, but also to avoid having to change my JS when i change my CSS, can i use something along the lines of this:

$('#inner-content-div').slimScroll({
   height: $(this).css('height')
});

The above example, of course, doesn't work, it's just something i tried and it failed. But it should illustrate my intention.

Answer 1

No you can't as there is no scope that defines the value of this to be the element, but you can create such a scope with each

$('#inner-content-div').each(function() {
   $(this).slimScroll({
       height: $(this).css('height')
   });
});

Answer 2

your code will work only if you set a height for the item in css. otherwise $(this).height(); will do

Answer 3

You can do this:

var myElem = $('#inner-content-div');
myElem.slimScroll({
   height: myElem.css('height')
});

This will work as you intend it to. Just assign the element and use it.