<!DOCTYPE html>
<html>
<head>
<title>Random_Color-Transformation</title>
<style type="text/css">
.div1{
height: 50px ;
width: 320px;
background-color: red;
font-size: 0.5em;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.div2{
height: 50px ;
width: 320px;
background-color: yellow;
font-size: 1em;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
</style>
<style type="text/css">
.div3{
height: 50px ;
width: 320px;
background-color: green;
font-size: 2em;
font-weight: bolder;
font-style: oblique;
}
</style>
</head>
<body>
<div class = "div1" id="00">
Some contents here!
</div>
<input type="button" value="00" onclick = "getBgColor(this);" />
<div class = "div2" id="01">
Some contents here!
</div>
<input type="button" value="01" onclick = "getBgColor(this);" />
<div class = "div3" id="10">
Some contents here!
</div>
<input type="button" value="10" onclick = "getBgColor(this);" />
</body>
<script type="text/javascript">
function getBgColor(t){
var myDiv = document.styleSheets[t.value.substring(0,1)].cssRules[t.value.substring(1,2)].style.backgroundColor;
alert(myDiv);
var a = Math.floor(255*Math.random()) + '';
var b = Math.floor(255*Math.random()) + '';
var c = Math.floor(255*Math.random()) + '';
document.styleSheets[t.value.substring(0,1)].cssRules[t.value.substring(1,2)].style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';
}
</script>
</html>
