how to access the styles from CSS

Question

Can we get the value from inside a css definition in the code if CSS resource is used?

e.g.

.iv_menu_thumbnail {  
  display: block;  
  width: 24px;  
  height: 24px;  
  margin: 3px;  
  float: left;  
  cursor: pointer;  
}`

Can we know via code the value of width and i want to access from one of my java class?

Thanks in advance

Answer 1

var width = $('.iv_menu_thumbnail').width();
console.log(width);

This will get the width of the element if this is what youre asking for. As far as I'm concerned you cannot get non numerical values from a css declaration.

But you can set your own values via jQuery using the

.css()

So it would look like this if you want to set a new css value. (or overwrite it)

$(someelement).css('float', 'left');

Answer 2

You can have a variables in your Css Resource file and set the width attribute with that variable, and then access the width varialbe from code.

CssResource

Css Resource file

@def small 1px; 
@def black #000;
border: small solid black;

Java Code

interface MyResources extends CssResource {
  int small();
}

Answer 3

As far as I know, you can only inspect the computed CSS property on an element where this has been applied. Like:

$(someElementOrId).css('width');

or

$(someElementOrId).width();

Note that the former and the latter differ - the former does not contain the unit of measure, the latter does.