Highlights of JavaScript — Class Names, Getting Multiple Elements, and Styling

To learn JavaScript, we must learn the basics.

In this article, we’ll look at the most basic parts of the JavaScript language.

Adding Class Names

We can add a class name to an HTML element with the JavaScript class names API.

For example, we can write the following HTML:

<img src="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo" id="image" onClick="expand();">

Then we can write the following CSS:

.big {
  width: 500px;
}

Then we can add the expand function by writing:

const expand = () => {
  document.getElementById("image").classList.add('big');
}

The big class has the width set to 500px.

In the expand function, we call the class:ist.add method to add the 'big' class to the element with the ID image .

And we set the onClick attribute with expand() to call the expand function when we click the image.

The image will then be expanded when we click on the image.

Swapping Images

We can swap an image for another when we hover over the image.

For example, we can write the following HTML:

<img src="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo" id="image" onMouseover="swap(1);" onMouseout="swap(0)">

And the following JavaScript code:

const swap = (index) => {
  const images = [
    'https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo',
    'https://i.picsum.photos/id/25/200/300.jpg?hmac=ScdLbPfGd_kI3MUHvJUb12Fsg1meDQEaHY_mM613BVM'
  ]
  const image = document.querySelector('#image');
  image.src = images[index];
}

When we hover over the image, the swap(1) expression is run.

It’s set as the value of the onMouseover attribute, so it’ll run when we hover over the image element.

If we move our mouse out of the image, then swap(0) is run to show the original image.

This is because swap(0) is set as the value of the onMouseout attribute.

Setting Styles

We can set styles with the className or style property.

For example, we can write the following HTML:

<p>
  hello world
</p>

And write the following CSS:

.big {
  font-size: 2em
}

Then write the following to make the text big with JavaScript:

document.querySelector("p").classList.add("big");

We get the p element with the document.querySelector method.

Then we add the big class to the p element with the classList.add method.

Alternatively, we can set the style property to the value we want:

document.querySelector("p").style.fontSize = '2em'

The style.fontSize property is the same as the font-size CSS property.

However, it’s better to use CSS and class names since it’s faster than setting styles with JavaScript.

Also, CSS code is more reusable.

Other style properties we can set include:

document.querySelector("p").style.cssFloat = "left";

to set the CSSfloat property to left .

We can set the visibility CSS property by writing:

document.querySelector("p").style.visibility = "hidden";

And the margin can be set by writing”:

document.querySelector("p").style.margin = "0 10px 0 10px;";

Target All Elements by Tag Name

We can get all elements by tag name.

This is more convenient than getting a single element with its ID or using querySelector to get the first element with the given selector.

For example, we can write the following HTML:

<p>foo.</p>
<p>bar.</p>
<p>baz.</p>

Then we can get all the p elements and loop through them by writing:

const pars = document.getElementsByTagName('p')
for (const p of pars) {
  p.style.fontFamily = "Verdana, Geneva, sans-serif";
}

We get the p elements, then loop through them with the for-of loop.

In the loop body, we set the fontFamily style to change the font of the text.

Conclusion

We can add class names with the classList.add method.

Also, we can get elements and loop through them and change their styles.