Change color
Description
The following code shows how to change color for a paragraph element in mouse out action.
Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w .ja v a 2 s . c o m-->
background: gray;
color: white;
padding: 10px;
margin: 5px;
border: thin solid black
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<script type="text/javascript">
var pElems = document.getElementsByTagName("p");
for (var i = 0; i < pElems.length; i++) {
pElems[i].onmouseover = handleMouseOver;
pElems[i].onmouseout = handleMouseOut;
}
function handleMouseOver(e) {
e.target.style.background = 'white';
e.target.style.color = 'black';
}
function handleMouseOut(e) {
e.target.style.removeProperty('color');
e.target.style.removeProperty('background');
}
</script>
</body>
</html>
Getter
<html>
<head>
<script type="text/javascript">
function getColor() {<!-- w ww . j av a 2s .c om-->
var oDiv = document.getElementById("myDiv");
alert(oDiv.style.color);
}
</script>
</head>
<body>
<div id="myDiv"
style="background-color: red; height: 50px; width: 50px; color: yellow"></div>
<br />
<input type="button" value="Get Background Color" onclick="getColor()" />
</body>
</html>