Skip to content

Commit 2490499

Browse files
committed
className & classList.add/remove()
1 parent 8f8b343 commit 2490499

File tree

2 files changed

+49
-9
lines changed

2 files changed

+49
-9
lines changed

11_className-classList.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// className - for check class and add
2+
// classList
3+
4+
const first = document.querySelector('.first');
5+
const second = document.querySelector('.second');
6+
const third = document.querySelector('.third');
7+
8+
// this just for check class
9+
// const classValue = first.className;
10+
// console.log(classValue); //first
11+
12+
// add first class here can multiple
13+
first.className = 'text colors';
14+
// but if separator like this
15+
first.className = 'text';
16+
//the last will select colors, and text class not
17+
first.className = 'colors';
18+
19+
// classList
20+
//["second", value: "second"] value 0: is second
21+
// so u should need add / remove syntax
22+
console.log(second.classList);
23+
24+
// add class colors on second element
25+
// if u need 2 class use ('class1','class2')
26+
second.classList.add('colors');
27+
second.classList.add('text');
28+
29+
// remove class first colors red
30+
first.classList.remove('colors');
31+
first.classList.add('text');

index.html

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>DOM</title>
77
<style>
8-
a {
9-
display: inline-block;
10-
color: #fff;
11-
background: #333;
12-
text-decoration: none;
13-
padding: 0.375rem 1.25rem;
8+
.colors {
9+
color: white;
10+
background: red;
11+
padding: 0.35rem 0.75rem;
12+
width: 16rem;
13+
}
14+
15+
.text {
16+
text-transform: uppercase;
1417
}
1518
</style>
1619
</head>
@@ -87,15 +90,20 @@ <h2>The Pirates</h2>
8790
<h3>Hello people</h3>
8891
<h2>Hello World</h2> -->
8992

90-
<!-- getAttribute, setAttribute -->
93+
<!-- getAttribute, setAttribute
9194
<div class="container">
9295
<h2 class="title" id="titles">Hello World</h2>
9396
<a href="index.html" class="links">This Links</a>
9497
<p>
9598
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam,
9699
doloribus!
97100
</p>
98-
</div>
101+
</div> -->
102+
103+
<!-- className & classList -->
104+
<h2 class="first">first element</h2>
105+
<h2 class="second">second element</h2>
106+
<h2 class="third">third element</h2>
99107

100108
<!-- source js -->
101109
<!-- <script src="/01_getElementById.js"></script> -->
@@ -107,6 +115,7 @@ <h2 class="title" id="titles">Hello World</h2>
107115
<!-- <script src="/07_nextSibling_previous.js"></script> -->
108116
<!-- <script src="/08_nextElementSibling_previous.js"></script> -->
109117
<!-- <script src="/09_textContent.js"></script> -->
110-
<script src="/10_getAttribute.js"></script>
118+
<!-- <script src="/10_getAttribute.js"></script> -->
119+
<script src="/11_className-classList.js"></script>
111120
</body>
112121
</html>

0 commit comments

Comments
 (0)