Learn the JavaScript classList property easy! 💡
2024 ж. 13 Мам.
5 713 Рет қаралды
#javascript #tutorial #course
00:00:00 introduction
00:00:27 setup
00:01:49 .add()
00:02:37 .remove()
00:04:58 .toggle()
00:05:25 .replace()
00:07:06 .contains()
00:08:24 H1
00:10:08 NodeLists
00:15:38 conclusion
// classList = Element property in JavaScript used to interact
// with an element's list of classes (CSS classes)
// Allows you to make reusable classes for many elements
// across your webpage.
// classList = Element property in JavaScript used to interact // with an element's list of classes (CSS classes) // Allows you to make reusable classes for many elements // across your webpage. // add() // remove() // toggle(Remove if present, Add if not) // replace(oldClass, newClass) // contains() // ---------- button ---------- const myButton = document.getElementById("myButton"); myButton.classList.add("enabled"); myButton.addEventListener('mouseover', event => { event.target.classList.toggle('hover'); }); myButton.addEventListener('mouseout', event => { event.target.classList.toggle('hover'); }); myButton.addEventListener('click', event => { if(event.target.classList.contains("disabled")){ event.target.textContent += "🤬"; } else{ event.target.classList.replace("enabled", "disabled"); } }); // ---------- h1 ---------- const myH1 = document.getElementById("myH1"); myH1.classList.add("enabled"); myH1.addEventListener("mouseover", event => { event.target.classList.toggle('hover'); }); myH1.addEventListener('mouseout', event => { event.target.classList.toggle('hover'); }); myH1.addEventListener('click', event => { if(event.target.classList.contains("disabled")){ event.target.textContent += "🤬"; } else{ event.target.classList.replace("enabled", "disabled"); } }); // ---------- NodeList ---------- let buttons = document.querySelectorAll(".myButtons"); buttons.forEach(button => { button.classList.add("enabled"); }); buttons.forEach(button => { button.addEventListener("mouseover", event => { event.target.classList.toggle("hover"); }); }); buttons.forEach(button => { button.addEventListener("mouseout", event => { event.target.classList.toggle("hover"); }); }); buttons.forEach(button => { button.addEventListener("click", event => { if(event.target.classList.contains("disabled")){ event.target.textContent += "🤬"; } else{ event.target.classList.replace("enabled", "disabled"); } }); }); Document Hello My button Button 1 Button 2 Button 3 Button 4 #myH1{ font-size: 5rem; } #myButton, .myButtons{ font-size: 4rem; margin: 10px; border: none; border-radius: 5px; padding: 10px 15px; } .enabled{ background-color: hsl(204, 100%, 50%); color: white; } .hover{ box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.2); font-weight: bold; } .disabled{ background-color: hsl(0, 0%, 60%); color: hsl(0, 0%, 80%); }
is there any way to contact you for asking questions about programming language? like discord, facebook something like that? 😃
hi man. i am enjoying your tutorials. the tut are very easy to understand (just completed the 5th one). thanks
Great, bro. Thank you very much!
BroCode best tutorials!! 👍👍😀🤩🤩
King❤❤
Hello my friend from Vietnam. Let me ask, how long does it take us to master a programming language?
Never
bro what did you click on keyboard to access the emoji???????????????
windows + .
windows + ;