Access to style properties in JS

[CyberAP]

Is there any way to access style properties from JS?
For example I have a property 'loginBarCollapsedHeight' in Login Bar and I need to use it in my JS, how should I do this?

 

[Chris D]

It's probably best to use the data attribute somehow.

<div class="SomeElement" data-loginbarheight="{xen:property loginBarCollapsedHeight}"></div>

Then you can do something like this:

$('.SomeElement').data('loginbarheight');

 

[CyberAP]

Thanks! I know this should be working but my variable (loginBarCollapsedHeight) somehow is always undefined. Data attribute is present in loginBar.

var $loginBar = $('#loginBar');
var loginBarHeight = $loginBar.outerHeight();
var loginBarCollapsedHeight = $loginBar.data('loginBarCollapsedHeight');
loginBarCollapsedHeight.replace(/[^0-9]/g, '');
var loginBarMargin = loginBarHeight - loginBarCollapsedHeight;

 

[Chris D]

data attributes must always be lower case.

That was one of the major breaking changes from old versions of jQuery to new.

It may be that. It must be lowercase in the HTML, e.g. data-loginbarcollapsedheight and also lower case in the JS, e.g. $loginBar.data('loginbarcollapsedheight');

 

[CyberAP]

data attributes must always be lower case.

That was one of the major breaking changes from old versions of jQuery to new.

It may be that. It must be lowercase in the HTML, e.g. data-loginbarcollapsedheight and also lower case in the JS, e.g. $loginBar.data('loginbarcollapsedheight');

Figured it out the same time you posted Huge thanks for your help!