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>

Click to view the demo

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>

Click to view the demo





















Home »
  Javascript »
    Javascript Reference »




Array
Canvas Context
CSSStyleDeclaration
CSSStyleSheet
Date
Document
Event
Global
History
HTMLElement
Input Element
Location
Math
Number
String
Window