Change color in JavaScript

Description

The following code shows how to change color.

Example


<!DOCTYPE html>
<html>
<body>
<div id="div1">
This is a DIV element. Click me to see the change.
</div><!--  www. ja  v a 2  s. c o m-->
<script type="text/javascript">
var div = document.getElementById("div1");

div.style.backgroundColor="#00f";
div.style.width="500px";
div.style.color="#fff";
div.style.height="200px";
div.style.paddingLeft="50px";
div.style.paddingTop="50px";
div.style.fontFamily="Verdana";
div.style.fontSize="2em";
div.style.border="3px dashed #ff0";
div.style.position="absolute";
div.style.left="20px";
div.style.top="10px";
div.style.textDecoration="underline";

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

Click to view the demo

The code above generates the following result.

Home »
  Javascript Tutorial »
    Style »
      Color

Javascript Tutorial Color
Change background color in JavaScript
Change background for a paragraph element i...
Change color for a paragraph element in mou...

Change color in JavaScript

Change element color by setting the color s...
Change the color style in JavaScript
Get Color in JavaScript
Get and set node background color in JavaSc...
Get background Color in JavaScript
Remove CSS background property with event.t...
Remove CSS color property with event.target...
Update bacground color recursively in JavaS...