js set class property code example

Example 1: js add class

var element = document.getElementById('element');
element.classList.add('class-1');
element.classList.add('class-2', 'class-3');
element.classList.remove('class-3');

Example 2: change class javascript

Syntax:
document.getElementById('myElement').className = "myclass";

<html> 
    <head> 
        <title>Change class of an element with javascript</title> 
        <style type="text/css"> 
            .redbutton{ 
                background-color: red; 
            } 
            .greenbutton{ 
                background-color: green; 
            } 
        </style> 
        <script type="text/javascript"> 
            function changeClass() { 
                document.getElementById('clickme').className = "greenbutton"; 
                var new_class = document.getElementById('clickme').className; 
                document.getElementById('classChange').innerHTML = "New Class Name : "  
                + new_class; 
            } 
        </script> 
    </head> 
    <body> 
        <button class="redbutton" id="clickme" onclick="changeClass()" 
                    >Change Class</button><br> 
        <p id="classChange">Class Name: redbutton</p> 
    </body> 
</html>

Example 3: javascript class

// Improved formatting of Spotted Tailed Quoll's answer
class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	introduction() {
		return `My name is ${name} and I am ${age} years old!`;
	}
}

let john = new Person("John Smith", 18);
console.log(john.introduction());

Example 4: javascript classes

class SayHelloTo {
  name (to) {
    console.log(`Hello ${to}`);
  }
  constructor (to) {
    this.name(to);
  }
}
const helloWorld = new SayHelloTo(World);

Example 5: class declaration in javascript

class NameOfClass {
//class declaration first letter should be capital it's a convention
  obj="text";
  obj2="some other text";
}
//always call class with "new" key word
console.log(new NameOfClass);

Tags:

Javascript Example

Recent Posts