Skip to content

Instantly share code, notes, and snippets.

@solendil solendil/csschanger.js
Last active Oct 30, 2016

Embed
What would you like to do?
A little utility to change the rules of a stylesheet on the fly.
/*
* Copyright 2016, Matthieu Dumas
* This work is licensed under the Creative Commons Attribution 4.0 International License.
* To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
*/
/* Identify rules in a given stylesheet and change them on the fly.
* var ss = StyleChanger("my_custom_identifier"); // stylesheet must have a dummy identifying rule like .my_custom_identifier{color:black;}
* ss.change("darkolivegreen", "blue"); // change all values with a given original value
* ss.change("darkolivegreen", "green"); // ...can be applied many times (original values are saved)
* ss.reset(); // reset all values to original
*/
var StyleChanger = function(id) {
id = id.toLowerCase().trim();
let findSS = function() {
for (let ss of document.styleSheets)
for (let rule of ss.cssRules)
if (rule.selectorText.toLowerCase().substr(1)===id)
return ss;
}
let ss = findSS();
if (!ss) return undefined;
ss.change = function(originalValue, newValue) {
for (let rule of ss.cssRules) {
if (!rule.originalStyle) { // init original rules at first use
rule.originalStyle = {};
for (let style of rule.style)
rule.originalStyle[style] = rule.style[style];
}
for (let style in rule.originalStyle) { // replace rules from original list
if (rule.originalStyle[style]===originalValue)
rule.style[style] = newValue;
}
}
}
ss.reset = function() {
for (let rule of ss.cssRules) {
if (!rule.originalStyle) continue;
for (let style in rule.originalStyle)
rule.style[style] = rule.originalStyle[style];
}
}
return ss;
}
<!-- a full working example including inlined StyleChanger -->
<html>
<head>
<style>
/* use a simple .dummy rule to identify your stylesheet from the javascript */
.my_custom_identifier {color:black;}
/* use identifiable styles so you can flag them from the javascript. in this case, darkolivegreen and aquamarine */
p {
color:darkOliveGreen;
}
h1 {
border-bottom:1px solid darkolivegreen;
}
h2 {
color:aquamarine
}
</style>
</head>
<body>
<h1>TITLE</h1>
<h2>subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non saepe obcaecati recusandae autem ratione natus molestiae vero libero cumque placeat dolorem odit molestias excepturi suscipit voluptatem perspiciatis, magnam dicta velit.</p>
<script>
var StyleChanger = function(id) {
id = id.toLowerCase().trim();
let findSS = function() {
for (let ss of document.styleSheets)
for (let rule of ss.cssRules)
if (rule.selectorText.toLowerCase().substr(1)===id)
return ss;
}
let ss = findSS();
if (!ss) return undefined;
ss.change = function(originalValue, newValue) {
for (let rule of ss.cssRules) {
if (!rule.originalStyle) { // init original rules at first use
rule.originalStyle = {};
for (let style of rule.style)
rule.originalStyle[style] = rule.style[style];
}
for (let style in rule.originalStyle) { // replace rules from original list
if (rule.originalStyle[style]===originalValue)
rule.style[style] = newValue;
}
}
}
ss.reset = function() {
for (let rule of ss.cssRules) {
if (!rule.originalStyle) continue;
for (let style in rule.originalStyle)
rule.style[style] = rule.originalStyle[style];
}
}
return ss;
}
// find the stylesheet to change
var ss = StyleChanger("my_custom_identifier");
// a simple change
ss.change("darkolivegreen", "blue");
// more complex usage with successive definitions
var val = 0;
setInterval(function() {
val+=10;
ss.change("darkolivegreen", "rgba("+(val%255)+",0,0,1)");
}, 100);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.