2

Ok, so I have this function designed to return a desired computed style from a specified element. It works in all desktop browsers that I have tested, however, it does not work in mobile safari. If I log the getComputedStyle call back to the console it is a [object CCStyleDeclaration] which is great, but when I log the getPropertyValue call it simply returns "null" instead of the correct style. Any help would be fantastic. Thanks!

Utils.getStyle = function(element, style){
    var strValue = "";
     if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(element, "").getPropertyValue(style);
     }else if(element.currentStyle){
        style = style.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = element.currentStyle[style];
    };
    return strValue;
};
rcooper102
  • 209
  • 1
  • 11
  • Have you dumped/inspected the contents of `document.defaultView.getComputedStyle(element, "")` ? – Stecman Aug 30 '12 at 23:18
  • I have on desktop but is there a way to get the entire dump in the iOS console? The thing drives me nuts, its like web debug dark ages. ;) – rcooper102 Aug 30 '12 at 23:28
  • Yeah I know what you mean! Have a look at [this SO question](http://stackoverflow.com/questions/323517/is-there-an-equivalent-for-var-dump-php-in-javascript): dumping the data onto the page is probably the easiest thing to do. – Stecman Aug 30 '12 at 23:58
  • Ya that helped narrow it down, turns out it isn't getComputedStyle(). When I dump element.style in a desktop browser it lists all the various styles on that DOM Element (both those assigned via CSS and javascript). However, when I dump that style object out in iOS it only lists styles that have been set via javascript. Styles defined within the stylesheet are not listed. – rcooper102 Aug 31 '12 at 15:53
  • [`element.style` accesses the HTML style attribute](https://developer.mozilla.org/en-US/docs/DOM/element.style), so it should only ever set/return inline styles. It seems strange that Safari on iOS would be missing `getComputedStyle`...On closer inspection, the [MDN page for getComputedStyle](https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle) refers to `window.getComputedStyle(element[, pseudoElt])`. In your code you use `document.defaultView` instead, which *is* `window`, though perhaps on iOS `document.defaultView` is `null`/`undefined`. Try just using `window` – Stecman Sep 01 '12 at 02:40

1 Answers1

1

In the case my comment about window.getComputedStyle vs document.defaultView.getComputedStyle has any substance, I use this function in my own library:

getComputedStyle : function(element){
    var styles = element.currentStyle || getComputedStyle(element, null);
    return styles;
}

Adapted to your function signature:

Utils.getStyle = function(element, style){
    var styles = element.currentStyle || getComputedStyle(element, null);

    // Prevent a 'Cannot read property X of null' error 
    if(styles != null){
        return styles[style];
    } else {
        return null;
    }
}

I can't test this in iOS unfortunately, but I'm interested to know if it works.

Stecman
  • 2,890
  • 20
  • 18