Get and display css properties at runtime.

properties-for-helper.js

 (function () {
            displayCssInfoFor();
        })();

        // A simple helper to display the CSS properties of an element at runtime.
        // Use:
        // By defualt, displays the color of the previous sibiling.
        // <span data-properties-for></span>
        // Specify element
        // <span data-properties-for='{"element": "selector"}'></span>
        // Specify properties
        // <span data-properties-for='{"css": "[array of css properties]"}'></span>
        // Specify both
        // <span data-properties-for='{"element": "selector", "css": "[array of css properties]"}'></span>
        function displayCssInfoFor() {
            var selector = "[data-properties-for]";
            var $elems = $(selector);

            $elems.each(function (index, elem) {
                var $displayElem = $(elem);
                var $targetElem = $displayElem.data("properties-for").element || $(elem).prev();
                var styles = $displayElem.data("properties-for").css || ["color"];

                styles.forEach(function (style, i) {
                    var isLast = styles.length - 1 === i;
                    $displayElem.append(style + ": " + $($targetElem).css(style));
                    if (!isLast) $displayElem.append("; ")
                })
            })
        }