CSS rules with multiple possible values (jQuery)

Here's a possible solution:

function getVisualCSS(tag, elem){
    var styles = [];
    var thisStyle = $(elem).css(tag);
    if(thisStyle != 'none') styles.push(thisStyle);
    while($(elem).parent()[0].tagName != 'BODY'){
        styles.push($(elem).parent().css(tag));
        elem = $(elem).parent();
    }
    styles.push($(elem).parent().css(tag));
    return $.unique($.grep(styles, function(n){
        return n != 'none';
    }));  
}

What it does is, that it checks all of an elements ancestors for a given CSS tag.

For the sake of an "cleaner" array, all none values are removed and only unique values are returned.

Here's a fiddle: http://jsfiddle.net/nslr/bXx46/2/

Ok, this is not the easy, elegant answer you're looking for, but I have a working option here: http://jsfiddle.net/nrabinowitz/Uu6p3/1/

It's similar to @Thor's in concept, but uses built-in jQuery functions to find all ancestors, map their text-decoration styles into an array, filter for unique values not equal to "none", and return the array of styles:

/**
 * Generic function to find all values for
 * CSS settings that allow multiple values.
 *
 * @param {String} selector    JQuery selector
 * @param {String} attr        CSS attribute to look for
 * @param {String[]} ignore    Values to ignore
 */
function findAllCssValues(selector, attr, ignore) {
    var temp = {};
    ignore = ignore || ['none'];
    return $.grep(
        // create the array of all values
        $(selector)
            // select element and all ancestors
            .parents().andSelf()
            // put all css attribute results into an array
            .map(function() {
                return $(this).css(attr)
            })
            // make it a regular Javascript array
            .toArray(),
        // now filter for unique values that aren't "none"
        function(val) {
            if (val in temp || $.inArray(val, ignore) >= 0) {
                return false;
            }
            temp[val] = true;
            return true;
        }
    );
}

findAllCssValues('#bar', 'text-decoration');

It works for all of your example snippets, as shown in the fiddle. I made it work for any CSS property, though I'm not sure this issue applies to anything but text-decoration.

If you try to set the inner span to text-decoration:none you'll notice the underline is still rendered from the parent div. The issue is that text-decoration doesn't inherit, but it's rendered as if it does.

So any text element will render the combination of all of its parents' text-decorations, even if it or any of its parents have text-decoration set to none.

If you want to know all of the text-decorations that have been applied to the text, you need to walk the chain right up to the top and record the combination of all decorations you encounter, excluding "none". Here's an example:

http://jsfiddle.net/fSESn/4/

function findDecoration( elem ) {
    var $elem = $(elem);
    var found = new Array();
    var dec = "";

    var current = $elem.css('text-decoration');

    if ( current != 'none' ) {
        found[ current ] = 1;
        dec = current;
    }

    var p = $elem.parent();
    while ( p != null && p.get(0).nodeName.toLowerCase() != 'body' ) {
        current = p.css('text-decoration');

        if ( current != 'none' && found[ current ] == null ) {
            found[ current ] = 1;
            dec = current + " " + dec;
        }
        p = p.parent();
    }

    return dec;
}