Get CSS class of an element with JavaScript/jQuery

This post will discuss how to get the CSS class of an element using JavaScript and jQuery.

1. Using jQuery

You can get the value of class attribute using jQuery’s .attr() method.

JS

$(document).ready(function() {

var className = $('#container').attr('class');

alert(className);

});

CSS

.outerclass {

font-size: 14px;

margin: 10px;

padding: 3px;

}

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

Alternatively, you can use jQuery’s .prop() method.

JS

$(document).ready(function() {

var className = $('#container').prop('class');

alert(className);

});

CSS

.outerclass {

font-size: 14px;

margin: 10px;

padding: 3px;

}

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

2. Using JavaScript

In plain JavaScript, you can use the className property to get the value of the class attribute of the specified element.

JS

1 2	var className = document.getElementById("container").className; alert(className);

CSS

.outerclass {

font-size: 14px;

margin: 10px;

padding: 3px;

}

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

In modern browsers, you can get value of className like:

JS

1 2	const { className } = document.querySelector('#container'); alert(className);

CSS

.outerclass {

font-size: 14px;

margin: 10px;

padding: 3px;

}

HTML

<!doctype html>

<body>

</body>

</html>

Edit in JSFiddle

That’s all about getting the CSS class of an element using JavaScript and jQuery.

Get CSS class of an element with JavaScript/jQuery

1. Using jQuery

JS

CSS

HTML

JS

CSS

HTML

2. Using JavaScript

JS

CSS

HTML

JS

CSS

HTML

Share this: