Having two style-sheets that can be loaded by user choice presents an interesting challenge. The available style-sheets are named one.css and two.css. My goal is to dynamically change the content when the user switches themes. Here is what I have attempted so far:
function compareStrings ( str1, str2 ) {
return ( ( str1 == str2 ) ? 0 : ( ( str1 > str2 ) ? 1 : -1 ) ;
}
(function(){
var href = $('link').attr('href');
console.log(href); // check what style-sheet
if(compareStrings(href,'one')==0)
$("#p1").html('this is the content for one.css');
$("#p1").append("still for one.css");
else if(compareStrings(href,'two')==0)
$("#p1").html('this is the content for two.css');
$("#p1").append("still for two.css");
})();
The current approach does not seem to work as expected. Any suggestions on how to fix this issue?