Kilokem/BroCodeJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ClassListts

Browse Source
This commit is contained in:
Kilokem
2024-10-13 19:38:13 +02:00
parent 12f3276172
commit 818028a6b9
2 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
Practice/NodeListsAndOtherLists/main.html
View File

@ -16,10 +16,27 @@
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-style: italic; font-style: italic;
} }
.textone{
font-style: italic;
font-weight: bold;
font-size: 5ch;
color: red;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-decoration: underline;
}
.texttwo{
font-style:initial;
font-weight: bold;
text-decoration: wavy;
text-shadow: 3px 3px 3px blue;
font-size: 5ch;
color: yellow;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
</style> </style>
<body> <body>
<button class="mybutton">Button 1</button> <button class="mybutton" id="buttonone">Button 1</button>
<button class="mybutton">Button 2</button> <button class="mybutton" id="buttontwo">Button 2</button>
<button class="mybutton">Button 3</button> <button class="mybutton">Button 3</button>
<button class="mybutton">Button 4</button> <button class="mybutton">Button 4</button>
<button class="mybutton">Button 5</button> <button class="mybutton">Button 5</button>

12
Practice/NodeListsAndOtherLists/script.js
View File

@ -30,4 +30,14 @@ buttons.forEach(button =>{
}); });
//CLASSLISTS //CLASSLISTS
//https://youtu.be/lfmg-EJ8gm4?si=-VAntMYmkAuzoruJ&t=35022
var buttone = document.getElementById("buttonone");
buttone.classList.add("textone"); //add class
buttone.classList.remove("mybutton"); //remove class
buttone = document.getElementById("buttontwo");
buttone.addEventListener("mouseover", event =>{
buttone.classList.toggle("texttwo"); //toggle will add if the class is not there and remove if it is there
});