Skip to content

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

License

Notifications You must be signed in to change notification settings

TSedlar/pseudo-styler

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.