0

I have a requirement where I need to get the computed/applied css style of a widget. I am using dojo widget. Is there way to identify the styles programmatically?

pavan
  • 979
  • 3
  • 11
  • 21
  • have a look at the `dojo/dom-style` module over [here](http://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html) – frank Jul 28 '15 at 20:09

1 Answers1

1

Use the dom-style module.

I'm assuming you're trying to get styles off the root node of your widget (specify if otherwise):

require(['dojo/dom-style','my/Widget'], function(domStyle, Widget) {

    var widgetInstance = new Widget();

    var integerWidthInPixels = domStyle.get(widgetInstance.domNode, 'width');

});

There's also the "domStyle.getComputedStyle" function, which despite the name probably isn't what you actually want. Look at the docs.

http://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html

user2867288
  • 1,979
  • 16
  • 20
  • The above always gives the values in px even if the an element has a class defined in %. For example: if a class is defined as div { height: 50%;}, I should get the value of height in % but it gives in pixels. Do you know how could we get that? – pavan Jul 29 '15 at 11:35
  • In that case, you don't need to use Dojo. Reference widgetInstance.domNode.style.height directly. – user2867288 Jul 29 '15 at 17:51
  • Using the above mentioned methods I will get computed styles. The widgetInstance.domNode.style.height will be empty if the height is applied from a class. This will work only if the widgets style's height is set. – pavan Jul 29 '15 at 18:11
  • It sounds like what you're looking for is to read the the CSS rules, not to get the computed styles. This may help: http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript – user2867288 Jul 31 '15 at 13:29