samad-aghaei/inject multiple CSS property on single cssRule, with more benefits!.js

## inject multiple CSS property on single cssRule, with more benefits!.js
<!DOCTYPE html>
<html>
<head>
<style>
.myClassName {
    width: 600px;
    height: 100px;
    background: red;
	font-size: 20px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
}
#warn{
	font-weigth:900
}
</style>
</head>
<body>
<main>
	<div>
		<p><b id="warn">Note:</b>This is and example text!</p>
		<p>This is another example text!</p>
		<div class="myClassName">holla</div>
	</div>
</main>

<script>
Node.prototype.css = function(cssObj){
	  el = this
	  var names = [];
	  while (el.parentNode){
		if (el.id){
		  names.unshift('#'+el.id);
		  break;
		}else{
		  if (el === el.ownerDocument.documentElement){
			  names.unshift(el.tagName);
		  }
		  else{
			for (var i = 1, e = el; e.previousElementSibling; e = e.previousElementSibling, i++);
			names.unshift(el.tagName + ':nth-child(' + i + ')');
		  }
		  el = el.parentNode;
		}
	  }
	  names = (names.join(' > ')).toLowerCase();
	  if(!document.getElementById('cssRules')){
		  document.head.insertAdjacentHTML( 'beforeend', '<style id="cssRules"></style>')
	  }
	  sheet = document.getElementById('cssRules').sheet
		  for(var rule = 0; rule < sheet.cssRules.length; rule++){
			  if(sheet.cssRules.item(rule) && sheet.cssRules.item(rule).selectorText === names){
				  e = rule
				break
			  }
		  }
		  if(e !== rule){
			  rule = sheet.insertRule(names + '{}', sheet.cssRules.length)
		  }
	  sheet.cssRules.item(rule).selectorText = names
	  if(cssObj){
		  for(prop in cssObj){
				sheet.cssRules.item(rule).style[prop] = function(e){
					try{
						return window.getComputedStyle(document.querySelector( cssObj[prop] ))[prop]
					}catch(error){
						return window.getComputedStyle(e)[cssObj[prop]] || cssObj[prop]
					}
				}(this)
		}
	  }
//return [rule, names]  /* to get the rule ID number and Unique CSSSelectorText */
//return this           /* to make it Chainable*/
}


document.getElementsByTagName('p')[0].css({
	'background-color': 'yellow',
	color: 'green',
	height: '100px',
	width: 'calc(100% / 2)',
	'brder-style': 'solid',
	'border-size': 'padding',
	'border-color': 'color',
	'padding': '2px',
	'font-weigth': '#warn',
	'font-size': '.myClassName',
	transition: '.myClassName',
	'-webkit-transition': '.myClassName'
})
document.getElementsByTagName('p')[0].css({'border': '2px solid #d40404'})
document.getElementsByTagName('p')[1].css({'border-color': 'p'})
document.getElementsByTagName('p')[1].css({'color': 'burlywood'})
document.getElementById('warn').css({'background-color': 'rgba(217, 223, 228, 0.67)'})
document.getElementsByTagName('div')[0].css({'font-size': '40px'})
document.querySelector('.myClassName').css({'width': '100px'})

document.getElementsByTagName('p')[1].addEventListener('click', function(e){
	e.target.css({
		'background-color': '#warn',
		transition: '.myClassName',
		'-webkit-transition': '.myClassName',
		width: '800px'
	})
	document.getElementsByTagName('p')[0].css({
		width:'300px'
	})
}, true)

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.myClassName {
	width: 600px;
	height: 100px;
	background: red;
	font-size: 20px;
	transition: width 2s;
	-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
	}
	#warn{
	font-weigth:900
	}
	</style>
	</head>
	<body>
	<main>
	<div>
	<p><b id="warn">Note:</b>This is and example text!</p>
	<p>This is another example text!</p>
	<div class="myClassName">holla</div>
	</div>
	</main>

	<script>
	Node.prototype.css = function(cssObj){
	el = this
	var names = [];
	while (el.parentNode){
	if (el.id){
	names.unshift('#'+el.id);
	break;
	}else{
	if (el === el.ownerDocument.documentElement){
	names.unshift(el.tagName);
	}
	else{
	for (var i = 1, e = el; e.previousElementSibling; e = e.previousElementSibling, i++);
	names.unshift(el.tagName + ':nth-child(' + i + ')');
	}
	el = el.parentNode;
	}
	}
	names = (names.join(' > ')).toLowerCase();
	if(!document.getElementById('cssRules')){
	document.head.insertAdjacentHTML( 'beforeend', '<style id="cssRules"></style>')
	}
	sheet = document.getElementById('cssRules').sheet
	for(var rule = 0; rule < sheet.cssRules.length; rule++){
	if(sheet.cssRules.item(rule) && sheet.cssRules.item(rule).selectorText === names){
	e = rule
	break
	}
	}
	if(e !== rule){
	rule = sheet.insertRule(names + '{}', sheet.cssRules.length)
	}
	sheet.cssRules.item(rule).selectorText = names
	if(cssObj){
	for(prop in cssObj){
	sheet.cssRules.item(rule).style[prop] = function(e){
	try{
	return window.getComputedStyle(document.querySelector( cssObj[prop] ))[prop]
	}catch(error){
	return window.getComputedStyle(e)[cssObj[prop]] \|\| cssObj[prop]
	}
	}(this)
	}
	}
	//return [rule, names] /* to get the rule ID number and Unique CSSSelectorText */
	//return this /* to make it Chainable*/
	}


	document.getElementsByTagName('p')[0].css({
	'background-color': 'yellow',
	color: 'green',
	height: '100px',
	width: 'calc(100% / 2)',
	'brder-style': 'solid',
	'border-size': 'padding',
	'border-color': 'color',
	'padding': '2px',
	'font-weigth': '#warn',
	'font-size': '.myClassName',
	transition: '.myClassName',
	'-webkit-transition': '.myClassName'
	})
	document.getElementsByTagName('p')[0].css({'border': '2px solid #d40404'})
	document.getElementsByTagName('p')[1].css({'border-color': 'p'})
	document.getElementsByTagName('p')[1].css({'color': 'burlywood'})
	document.getElementById('warn').css({'background-color': 'rgba(217, 223, 228, 0.67)'})
	document.getElementsByTagName('div')[0].css({'font-size': '40px'})
	document.querySelector('.myClassName').css({'width': '100px'})

	document.getElementsByTagName('p')[1].addEventListener('click', function(e){
	e.target.css({
	'background-color': '#warn',
	transition: '.myClassName',
	'-webkit-transition': '.myClassName',
	width: '800px'
	})
	document.getElementsByTagName('p')[0].css({
	width:'300px'
	})
	}, true)

	</script>
	</body>
	</html>