JSFiddle - React, Tailwind, and code Playground
HTML
<button class="special" id="pressme">Press me</button>
<p>CSS rule 'button.special' found: <b id="cssbp"></b></p>
<p>JS object 'window.location' found: <b id="jswin"></b></p>
<p>JS method 'CSSRuleExists' found in window object: <b id="jscrl"></b></p>
<hr />
<p>CSS rule 'button.cool' found: <b id="cssbc"></b></p>
<p>JS object 'epicfail' object' found: <b id="jsef"></b></p>
<p>JS method 'Imnothere' found in window object: <b id="jsnef"></b></p>
CSS
button.special {
background: #eee;
border: 1px solid #555;
border-width: 1px 3px 3px 1px;
transition: all .2s;
padding: 8px;
outline: none;
}
button.special:active {
border-width: 3px 1px 1px 3px;
background: #e9e9e9;
}
JavaScript
window.CSSRuleExists = function(rule) {
var sSheetList = document.styleSheets;
for (var sSheet = 0; sSheet < sSheetList.length; sSheet++) {
var ruleList = sSheetList[sSheet].cssRules;
for (var item = 0; item < ruleList.length; item ++){
if(ruleList[item].selectorText === rule) {
return true;
}
}
}
return false;
}
window.JSFunctionExists = function(method, parent) {
parent = (typeof parent === typeof undefined) ? window : parent;
return (typeof parent[method] === 'function');
}
window.JSObjectExists = function(object, parent) {
parent = (typeof parent === typeof undefined) ? window : parent;
return (typeof parent[object] === 'object');
}
function process() {
document.getElementById('cssbp')
.innerHTML = CSSRuleExists('button.special');
document.getElementById('jscrl')
.innerHTML = JSFunctionExists('CSSRuleExists');
document.getElementById('jswin')
.innerHTML = JSObjectExists('location');
document.getElementById('cssbc')
.innerHTML = CSSRuleExists('button.cool');
document.getElementById('jsnef')
.innerHTML = JSFunctionExists('Imnothere');
document.getElementById('jsef')
.innerHTML = JSObjectExists('epicfail');
}
document.getElementById('pressme')
.addEventListener("click", process);