coding180 icon
Coding180
Control class name (className attribute)

Control class name (className attribute)

Home > Tutorials > JavaScript > DOM Manipulation


The className attribute sets or returns the class attribute of an element.

Syntax:

object.className = classname

Let's try:

1. Get the class attribute of the element.

2. Specify a css style for an element in the web page to change the appearance of the element

Take a look at the following code to get the class attribute of the <p> element and change the className:

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>className attribute - coding180.com</title>
    <style>
        input {
            font-size: 10px;
        }

        .one {
            width: 200px;
            background: #ccc;
        }

        .two {
            font-size: 18px;
            color: #f00;
        }
    </style>
</head>

<body>
    <p id="con" class="one">JavaScript</p>
    <form>
        <input type="button" value="add style" onclick="modifyclass()" />
    </form>


    <script type="text/javascript">
        // get p element by id
        var mychar = document.getElementById("con");

        // print first class name
        document.write("class name: " + mychar.className + "<br>")

        // change the class name of p element to two
        function modifyclass() {
            mychar.className = "two";

        }
    </script>
</body>

</html>

result:

Task - Exercise 20

Set the style of the element through the className attribute:

1. Edit line 41, and add the style of "class name one" to the id="p1" element through className. When the "Add Style" button is clicked, the first paragraph of text is styled.

2. Edit line 45, and change the id="p2" element to the style of "class name two" through className. When the "Change Appearance" button is clicked, the second paragraph of text changes style.

Task Code

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>className attribute</title>
    <style>
        body {
            font-size: 16px;
        }

        .one {
            border: 1px solid #eee;
            width: 230px;
            height: 50px;
            background: #ccc;
            color: red;
        }

        .two {
            border: 1px solid #ccc;
            width: 230px;
            height: 50px;
            background: #9CF;
            color: blue;
        }
    </style>
</head>

<body>
    <p id="p1"> JavaScript enables web pages to display dynamic
        effects and realize interactive functions with users. </p>
    <input type="button" value="add style" onclick="add()" />
    <p id="p2" class="one">JavaScript makes web pages display dynamic
        effects and realizes interaction with users. </p>
    <input type="button" value="Change Appearance" onclick="modify()" />

    <script type="text/javascript">
        function add() {
            var p1 = document.getElementById("p1");

        }
        function modify() {
            var p2 = document.getElementById("p2");

        }
    </script>
</body>

</html>

 


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel