solendil · October 30, 2016 00:38
diff --git a/csschanger.js b/csschanger.js
 /*
 * 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;
 }
diff --git a/example.html b/example.html
 <!-- 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>
	/*
	* 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>