jQuery .css() method pure JavaScript.

css.js

/**
 * jQuery .css() method pure JavaScript
 * @usage
 * $('#el').css('color','red')
 * $('.el').css({'color':'red', 'font-weight': 'bold'})
 * $('.el').css({'text-stroke': '2px red'}) // Adds vendor prefix if required.
 * $('#el').css('color') // Returns red
 * $('.el').css('color') // Returns the color of the first matching item
 * $('.el').css('text-stroke-color') // Returns red
 */
class CSS {
    constructor(selector) {
        this.elements = CSS.getSelector(selector);
        return this;
    }

    each(func) {
        if (!this.elements.length) {
            return this;
        }
        this.elements.forEach((el, index) => {
            func.call(el, el, index);
        });
        return this;
    }

    css(css, value) {
        if (value !== undefined) {
            this.each((el) => {
                CSS.setCss(el, css, value);
            });
            return this;
        }
        if (typeof css === 'object') {
            for (const property in css) {
                if (Object.prototype.hasOwnProperty.call(css, property)) {
                    this.each((el) => {
                        CSS.setCss(el, property, css[property]);
                    });
                }
            }
            return this;
        }
        const cssProp = CSS.camelCase(css);
        const property = CSS.styleSupport(cssProp);
        return getComputedStyle(this.elements[0])[property];
    }

    static getSelector(selector, context) {
        if (selector && typeof selector !== 'string') {
            if (selector.length !== undefined) {
                return selector;
            }
            return [selector];
        }
        context = context || document;

        // For performance reasons, use getElementById
        // eslint-disable-next-line no-control-regex
        const idRegex = /^#(?:[\w-]|\\.|[^\x00-\xa0])*$/;
        if (idRegex.test(selector)) {
            const el = document.getElementById(selector.substring(1));
            return el ? [el] : [];
        }
        return [].slice.call(context.querySelectorAll(selector) || []);
    }

    static setCss(el, prop, value) {
        let cssProperty = CSS.camelCase(prop);
        cssProperty = CSS.styleSupport(cssProperty);
        el.style[cssProperty] = value;
    }

    static camelCase(text) {
        return text.replace(/-([a-z])/gi, (s, group1) => group1.toUpperCase());
    }

    static styleSupport(prop) {
        let vendorProp;
        let supportedProp;
        const capProp = prop.charAt(0).toUpperCase() + prop.slice(1);
        const prefixes = ['Moz', 'Webkit', 'O', 'ms'];
        let div = document.createElement('div');

        if (prop in div.style) {
            supportedProp = prop;
        } else {
            for (let i = 0; i < prefixes.length; i++) {
                vendorProp = prefixes[i] + capProp;
                if (vendorProp in div.style) {
                    supportedProp = vendorProp;
                    break;
                }
            }
        }

        div = null;
        return supportedProp;
    }
}

function $(selector) {
    return new CSS(selector);
}

/**
 * jQuery .css() method pure JavaScript
 * @usage
 * $('#el').css('color','red')
 * $('.el').css({'color':'red', 'font-weight': 'bold'})
 * $('.el').css({'text-stroke': '2px red'}) // Adds vendor prefix if required.
 * $('#el').css('color') // Returns red
 * $('.el').css('color') // Returns the color of the first matching item
 * $('.el').css('text-stroke-color') // Returns red
 */