Sololearn: Learn to Code
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"; })
3rd Jun 2023, 2:45 AM
Ferhat Teker
Ferhat Teker - avatar
+ 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
3rd Jun 2023, 2:48 AM
Aman Chadar
Aman Chadar - avatar
0
you can do it with just css by creating a pseudo class active and hover and assigning a different style to it.
3rd Jun 2023, 3:26 AM
Bob_Li
Bob_Li - avatar
0
use classList.toggle()
3rd Jun 2023, 5:22 AM
Bob_Li
Bob_Li - avatar
0
here: (you can even change the textContent with js) https://code.sololearn.com/WM9U68iaPFbZ/?ref=app
3rd Jun 2023, 5:30 AM
Bob_Li
Bob_Li - avatar
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.
3rd Jun 2023, 5:58 AM
Bob_Li
Bob_Li - avatar
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
3rd Jun 2023, 9:39 AM
Mohammed
Mohammed - avatar