jqLite .css() retrieves only inline styles

[redaemn]

It seems that using jqLite .css() to retrieve styles define inside an external CSS file does not work. I tried this in Chrome 27

http://jsfiddle.net/redaemn/pbucv/1/

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[redaemn]

@btford I updated the fiddle to use Angular v1.0.8 and the issue persists

http://jsfiddle.net/redaemn/pbucv/10/

Here I also tried version 1.2.0rc1 and again the issue persists

I'd just like to know: is this a bug or is it supposed to work like this? (because jQuery original .css() doesn't work like this...)

Thanks for your help!

[deepak-nulu]

I would like this to work like in jQuery. i.e. jqLite's .css() method should return the values even if they are defined in an external CSS file. Without this functionality, I am now forced to include jQuery just for this. Thanks!

[btford]

This should either be documented, or fixed (not sure which).

[deepak-nulu]

Fixed, please :-)

[btford]

Depends on how heavy the code is. The point of Angular having a jqLite is to avoid duplicating too much of jQuery. At some point, it's cheaper/easier to just include jQuery. Thus, I'm deferring the decision. :)

[deepak-nulu]

Makes sense. Thanks for the quick response.

[crtag]

Then remove this method completely to avoid confusion OR clearly state this behaviour in docs. There's so little chance of inline styles so those who utilise that approach should really employ jQuery.

[caitp]

There's a line in one of my jqLite patches to add a call to getComputedStyle() to jqLite.css() --- It would be a simple thing to add that line in a separate patch as a quick fix to this, I really don't think it would hurt anything

---

Also, the currentStyle property (used if msie <= 8) does return not just the inline style, it's essentially getComputedStyle() --- so this only affects non-IE browsers, I guess (which does actually make the current jqLite.css() behaviour inconsistent across browsers)

[tomchentw]

Encounter same problem here. As @caitp said, I use getComputedStyle() to retrieve what I want here.
Refer to: https://github.com/jquery/jquery/blob/master/src/css/var/getStyles.js

[calummoore]

The solution is pretty much the same length!

Works in IE6 > and real browsers.

css: function(element, name, value) {
    name = camelCase(name);

    if (isDefined(value)) {
        element.style[name] = value;
    } else {
        var val;
        //for old IE
        if (isDefined(element.currentStyle)){
            val = element.currentStyle[name];
        }
        //for modern browsers
        else if (isDefined(window.getComputedStyle)){
            val = element.ownerDocument.defaultView
                .getComputedStyle(element,null)[name];
        }
        else {
            val = element.style[name];
        }
        return  (val === '') ? undefined : val;
    }

},

[howardengelhart]

+1

[charlie]

+1 for @calummoore's solution