selector-injector

Append, modify and remove CSS rulesets dynamically. No additional DOM nodes required.

• Injected rulesets are appended to an existing in-memory StyleSheet.
• Original rulesets are not modified, only overridden by order or specificity.

Installation

$ npm install selector-injector

Via browser:

<script src="https://cdn.jsdelivr.net/npm/selector-injector@latest"></script>

Usage

Import

import selectorInjector from 'selector-injector';

Via browser:

const selectorInjector = window['selector-injector'];

API

inject()

selectorInjector.inject(selector[, ruleset]);

• Parameters

  • selector

    String representing a valid CSS selector.

  • ruleset [optional]

    String representing a valid CSS ruleset.

• Usage

  // append ruleset
  selectorInjector.inject('#app', '{ background-color: #333; }');
  
  // modify ruleset
  selectorInjector.inject('#app', '{ background-color: #FFF; color: #333; }');
  
  // remove ruleset
  selectorInjector.inject('#app');

getInjectedList()

• Usage

  // returns all injected rulesets
  selectorInjector.getInjectedList();

Compatibility

Internet Explorer 11+

Firefox 45+

Chrome 50+

License

MIT