EDITED.
In JQuery, You can do this.
replist=[ ['button-fancy', 'btn btn-primary btn-sm' ],
['button-morefancy', 'btn btn-default btn-lg'] ];
$(document).ready(function(){
for(i=0; i<replist.length; i++){
elems=document.getElementsByClassName(replist[i][0]);
for(j=0; j<elems.length; j++){
elems[i].style.className = " "+replist[1];
}
}
}
Since my original post was downvoted, I updated it with a slightly efficient code. Although it has two loops, the outer loops depend on how many classes you put and the inner loop depends on how many buttons there are. Say you added 5 classes and 20 buttons of each class. The style would be updated 100 times. Which is indeed taxing, but the amount of tax is not very significant as far as utility is concerned.
Secondly, you can add it to the beginning of a document or a completely different file to aid in debugging but yes, since its separated from CSS, it will be slightly hard to debug.
Thirdly, it is for prototype purpose. In the final version, you can perform a search and replace in order to replace the original buttons.
Fourthly, it is not possible to style the entire .button-fancy
class. I have replaced the .button-fancy
class wherein, the DOM Tree won't find it. Since, my target is to reproduce a search-and-replace functionality. Inspecting the element (in firefox) will yield that it does not have any button-fancy class.
Lastly, it is for PROTOTYPE PURPOSE. And should be taken as such. It is not right. It is not good practice. But It is a quick and dirty way to test. It tries to mimic what SASS does but in the client. It is not production ready. But it does not need recompilation every time you update the CSS. You might use SASS but you can update the SASS CSS only when you see fit.
Thank you.