User Tools

Site Tools


css:div:inherit_all_css_properties_from_parent_div_to_child_div

CSS - DIV - Inherit all css properties from parent div to child div

#parent, #parent > div {
  /* your properties */
}

Dynamically inherit all CSS properties given to the parent at runtime

#child {
  all: inherit;
}

Using JQuery

Method to copy all styles (inherited, native, descended, inline, etc) from the @param source element, to the invoking element:

$.fn.copyCSS = function (source) {
    var dom = $(source).get(0);
    var dest = {};
    var style, prop;
    if (window.getComputedStyle) {
        var camelize = function (a, b) {
                return b.toUpperCase();
        };
        if (style = window.getComputedStyle(dom, null)) {
            var camel, val;
            if (style.length) {
                for (var i = 0, l = style.length; i < l; i++) {
                    prop = style[i];
                    camel = prop.replace(/\-([a-z])/, camelize);
                    val = style.getPropertyValue(prop);
                    dest[camel] = val;
                }
            } else {
                for (prop in style) {
                    camel = prop.replace(/\-([a-z])/, camelize);
                    val = style.getPropertyValue(prop) || style[prop];
                    dest[camel] = val;
                }
            }
            return this.css(dest);
        }
    }
    if (style = dom.currentStyle) {
        for (prop in style) {
            dest[prop] = style[prop];
        }
        return this.css(dest);
    }
    if (style = dom.style) {
        for (prop in style) {
            if (typeof style[prop] != 'function') {
                dest[prop] = style[prop];
            }
        }
    }
    return this.css(dest);
};

References

css/div/inherit_all_css_properties_from_parent_div_to_child_div.txt · Last modified: 2021/08/08 12:59 by peter

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki