Element className Property - Javascript DOM

Javascript examples for DOM:Element className

  1. HOME
  2. Javascript
  3. DOM
  4. Element className

Description

The className property sets or gets the class name of an element for the value of an element's class attribute.

Set the className property with the following Values

Value Description
class Sets the class name of an element.

To apply multiple classes, separate them with spaces, like "test another"

Return Value

A String, representing the class, or a space-separated list of classes, of an element

The following code shows how to Set the class for a <div> element with id="myDIV":

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {//w w  w.j ava 2  s.  c o  m
    width: 300px;
    height: 50px;
    text-align: center;
    background-color: coral;
    color: white;
    margin-bottom: 10px;
}
</style>
</head>
<body>

<div id="myDIV" >
I am a DIV element
</div>

<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
    var x = document.getElementById("myDIV");

    x.className = "mystyle";
}
</script>

</body>
</html>

Related Tutorials