pseudo:styler

Allows for forcing an element to be styled with a pseudo-class.

Retrieving

JSDelivr kindly hosts this script here

<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/TSedlar/pseudo-styler@1.0.8/pseudostyler.js'>

Example usage:

codepen

(async () => {
  let styler = new PseudoStyler();
  await styler.loadDocumentStyles();
  document.getElementById('button').addEventListener('click', () => {
    const element = document.querySelector('#test');
    styler.toggleStyle(element, ':hover');
  });
})();

Explanation:

This script will grab all of the stylesheets in the current document, obtain their href links, and pass the CSS sources into a hidden stylesheet to be parsed.

Methods:

toggleStyle(element, pseudoClass[, force])

Toggles a pseudo class on an element. If the optional force parameter is specified, then if true, toggle the pseudo class on; if false, toggle the pseudo class off.

async loadDocumentStyles()

Asynchronously loads all styles from the current document to be parsed for pseudo class rules.

register(element, pseudoClass)

Finds any applicable CSS pseudo class rules for the element and adds them to a separate style sheet. This method is called automatically by toggleStyle.

deregister(element, pseudoClass)

Removes the element's mimicked pseudo class from the styler's stylesheet. This method can be useful to clear the mimicked rules in case the element's style has changed.

addCSS(text)

Adds CSS to this style sheet's rules that are checked for pseudo classes.

async addLink(url)

Fetches the CSS resource and adds its CSS to the styler.

Thanks:

Thanks goes to Finn Thompson for the idea of the project and helping to polish the code and fix bugs for cross-browser compatibility.