JSFiddle - React, Tailwind, and code Playground

by Elena Lembersky

HTML

<div class="red">1a</div>
<div class="blue">2b</div>

JavaScript

var n=0;
var elements=['.red','.blue','.yellow'];

var styles={
	'.red':{
  	'position':{'default':'','new':'absolute'},
    'overflow':{'default':'','new':'hidden'}
  },
  '.blue':{
  	'color':{'default':'','new':'#cc0000'},
  },
  '.yellow':{}
}

//alert(styles['.red']['position'].default);
//alert(Object.keys(styles['.red']));
function changeCSS(allComponents){
  if(!allComponents){  	
    console.log('remain: '+elements);
    for (item in elements){
    	var elForRem = elements[item];
      delete styles[elForRem];
    }
  }
  $.each(styles, function(index, value) {
    for (rule in styles[index]){    	
      var defValue = jQuery(index).css(rule);
      //console.log('defValue: '+defValue);
      styles[index][rule].default=defValue;
      jQuery(index).css(rule,styles[index][rule].new);
    }
  });
}

function resetCSS(){
  $.each(styles, function(index, value) {
      for (rule in styles[index]){
        jQuery(index).css(rule,styles[index][rule].default);
      }
  });
}



function waitForElement(){
  n++;
  console.log('counter: '+n);
  for (let i = 0; i < elements.length; i++) {
      if($(elements[i]).size()){
        elements.splice(i, 1);
        console.log(elements);
        if(elements.length==0){
        	changeCSS(true);
          return;
        }
      }
  }
  if (n<10) {
  	waitForElement();
  }
  else{
  	changeCSS(false);
    return;
  }
}

waitForElement();