Manipulating element style
After selecting the right element from the DOM, we can change the CSS style that applies to it. We can do this using the style property. This is how to do it:
- Select the right element from the DOM.
- Change the right property of the style property of this element.
We are going to make a button that will toggle the appearing and disappearing of a line of text. To hide something using CSS, we can set the display property of the element to none, like this for a p (paragraph) element:
p {
display: none;
}
And we can toggle it back to visible using:
p {
display: block;
}
We can add this style using JavaScript as well. Here is a little HTML and JavaScript snippet that will toggle the displaying of a piece of text:
<!DOCTYPE html>
<html>
<body>
<script>
function toggleDisplay(){
let p = document.getElementById("magic");
if(p.style.display === "none...
