<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Adding of CSS classes in JavaScript | Trepachev Dmitry</title>
		
		<link rel="stylesheet" href="/css/fonts/list.css?v=8">
		<link rel="stylesheet" href="/css/styles.css?v=323">
		<link rel="stylesheet" href="/js/highlighter/highlighter.css?v=79">
		
		<script src="/js/highlighter/highlighter.js?v=118"></script>
		
		<script src="/js/location.js?v=3"></script>
		<script src="/js/locale.js?v=5"></script>
		<script src="/js/main.js?v=130"></script>
		
		<meta name="yandex-verification" content="00eb45b7559e5c68">
		<meta name="google-site-verification" content="Af0TM2OrwIEtjoQXxYz2-1C-21E1m7DB23_kWpE9sLg">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<meta name="description" content="In this lesson, we will learn how to manipulate CSS classes via the classList object in JavaScript.">
		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
	</head>
	<body id="top">
		<div class="wrapper">
			<header>
				<div class="top">
	<div class="left"><img data-module="coder" src="" alt=""></div>
	<div class="right">
		offline version 0.0.2	</div>
	<div class="center">
		<br><br>	</div>
</div>								<nav data-module="mainmenu">
	<section class="main active">
		<span data-href="/en/javascript/" data-open="javascript">JavaScript</span>
	</section>

	<section class="sub" data-name="javascript">
		<a href="/en/javascript/book/prime/">Prime book</a>
		<a href="/en/javascript/book/practice/">Practice book</a>
		<a href="/en/javascript/book/supreme/">Supreme book</a>
	</section>
</nav>							</header>
			<main>
				<h1>Adding of CSS classes in JavaScript</h1>
				<div class="content">
<div class="ref">
	<a href="/en/javascript/manual/dom/classList/add/"><code class="code inline">classList.add</code></a>
</div>
<div class="task">
	<p>
		Given an element:
	</p>
	<div class="block">
		<code class="highlight" data-module="highlight" data-lang="html">&lt;p id="elem" class="www ggg zzz"&gt;&lt;/p&gt;</code>
	</div>
	<p>
		Add class <code class="selector inline">xxx</code> to it.
	</p>
</div>
</div>			</main>
			<div class="bottom">
	<section class="pages" data-url="/en/javascript/book/prime/" data-persent="74" data-hash="jsPmAtCAd" data-quantity="503" data-num="373"><a href="/en/javascript/book/prime/dom/attributes/classes-array" class="prev"><span class="arrow">&larr;</span></a><a href="/en/javascript/book/prime/dom/attributes/classes-removing" class="next"><span class="arrow">&rarr;</span></a></section></div>			<footer>
	<div class="contacts">
	Trepachev Dmitry &copy; 2012-2023 <br>
	<a href="https://t.me/trepachev_dmitry">t.me/trepachev_dmitry</a>
</div>		
</footer>			<div class="jump">
	<a href="#top" class="to-top">&uarr;</a>
</div>			<div class="langer">
	<a href="/en/javascript/book/prime/dom/attributes/classes-adding/" class="active">en</a><a href="/ru/javascript/book/prime/dom/attributes/classes-adding/">ru</a></div>			</div>
		</div>
		
		<script src="/js/metrika.js?v=1"></script>	</body>
</html>