New course! Every coder should learn Generative AI!
Try a free lesson+ 3
assign a class name, id or data attribute to your HTML-Tag which includes the text like:
<p class="text">Hello World</p>
<button id="style_changer">Click Me</button>
Now store the specific tags in variables in JS:
let text = document.querySelector(".text")
let btn = document.getElementById("style_changer")
Now create a click event and manipulate css with JS. For Example the Font-Family
btn.addEventListener("click", ( ) => {
text.style.fontFamily = "Arial";
})
+ 2
Assign an id to parent tag [where text is located]
now use js 👇
Function abc() {
document.getElementById("parentid").style.fontFamily="font family name";
}
add onclick attribute in button tag
<button onclick="abc()" > Click me to change the font </ button>
Note : Don't forget to link font-family in css or html
0
you can do it with just css by creating a pseudo class active and hover and assigning a different style to it.
0
use classList.toggle()
0
here: (you can even change the textContent with js)
https://code.sololearn.com/WM9U68iaPFbZ/?ref=app
0
Clement Joshua Anthony
There are a lot of things you can do in js.
You can change font size, style, color, etc as individual attributes, or even modify other elements with javascript.
Switching classes with js is another way.
In my code font-changeJs, using javascript, I changed the button style by toggling class "horror", changed the button text from "Click Me" to "Welcome", changed the body background color again by toggling class "dark" and incremented a counter... all from one button click.
you can get very creative results with css and js, but you have to really practice and read up on the functionalities.
0
https://code.sololearn.com/W2MN90NbQbwB/?ref=app
You can do that with css and html just, like this 👆, it's better than used the hover