Can't Get Styles in Non-Webkit Browsers with jQuery

Question

I'm using this script to pull the style information for an element on a page, and then apply those styles to a second element, but for some reason, it's only working in Chrome and Safari [not Firefox or Internet Explorer]. This is problematic, because I mainly need this for Internet Explorer.

Here's the demo: http://jsfiddle.net/J3tSx/1/

Script:

$(document).ready(function() {
    function css(a) {
        var sheets = document.styleSheets, o = {};
        for (var i in sheets) {
            var rules = sheets[i].rules || sheets[i].cssRules;
            for (var r in rules) {
                if (a.is(rules[r].selectorText)) {
                    o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
                }
            }
        }
        return o;
    }
    function css2json(css) {
        var s = {};
        if (!css) return s;
        if (css instanceof CSSStyleDeclaration) {
            for (var i in css) {
                if ((css[i]).toLowerCase) {
                    s[(css[i]).toLowerCase()] = (css[css[i]]);
                }
            }
        } else if (typeof css == "string") {
            css = css.split("; ");
            for (var i in css) {
                var l = css[i].split(": ");
                s[l[0].toLowerCase()] = (l[1]);
            }
        }
        return s;
    }
    /*
    $("#test_div").click(function() {
        alert("clicked");
        if (!$(this).hasClass("hovered")) {
            alert("detected no hovered class");
            $(this).addClass("hovered");
            alert("added hovered class");
            var hoverStyle = css($("#test_div"));
            alert("created the hoverStyle variable");
            $("#second_div").css(hoverStyle);
            alert("applied the hoverStyle variable to #second_div");
        }
    });
    */
    var hoverStyle = css($("#test_div"));
    alert("created the hoverStyle variable");
    $("#second_div").css(hoverStyle);
    alert("applied the hoverStyle variable to #second_div");
});

HTML:

<section id="test_div">
</section>
<section id="second_div">
</section>

UPDATE: What's weird is that neither IE nor Firefox throw any kind of error. They just act as if #test_div is unstyled, and therefore no styles get added to #second_div. Very strange.

UPDATE 2: I just noticed this bit of code:

var s = {};
if (!css) return s;

I think this may have something to do with it.

Things I've tried

Changing the names of the sections, to get rid of the _
Changing to an older version of jQuery
Moving the position of the code from the body to the head, etc

score 1 · Accepted Answer · edited May 23 '17 at 12:03

Looks like that function wasn't getting all of the styles of the element in IE and FireFox. You can use console.log(hoverStyle) to view what styles were being retrieved. It appears only color, height, and width were being pulled in FireFox.

Try this solution provided as the second answer here. (make sure to upvote the original post!)

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            };
            return returns;
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                returns[prop] = style[prop];
            };
            return returns;
        };
        return this.css();
    }
})(jQuery);

This works in FireFox and IE: FIDDLE.

This is perfect, thanks! I'll definitely upvote the original answer as well. One more thing: I'd like to have these styles apply to a class that I can then toggle with jQuery. Is this possible, or would I need to just clear the inline styles, then regenerate them every time? — JacobTheDev, Dec 23 '13 at 17:09
You can dynamically create CSS classes with JavaScript, but it's not recommended: (http://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply). IMO this seems like a good use case for inline styles. Good luck =D — Dan-Nolan, Dec 23 '13 at 17:15

Can't Get Styles in Non-Webkit Browsers with jQuery

1 Answers1