Category: JavaScript

Sometimes, we want to retrieve the position (X,Y) of an HTML element with JavaScript.

In this article, we’ll look at how to retrieve the position (X,Y) of an HTML element with JavaScript.

How to retrieve the position (X,Y) of an HTML element with JavaScript?

To retrieve the position (X,Y) of an HTML element with JavaScript, we use the getBoundingClientRect method.

For instance, we write

const { top, right, bottom, left } = element.getBoundingClientRect();
console.log(top, right, bottom, left);

to call the element.getBoundingClientRect method to return the position of the element.

We get the top, right, bottom, and left position from the object returned.

Conclusion

To retrieve the position (X,Y) of an HTML element with JavaScript, we use the getBoundingClientRect method.

Sometimes, we want to check if an element contains a class in JavaScript.

In this article, we’ll look at how to check if an element contains a class in JavaScript.

How to check if an element contains a class in JavaScript?

To check if an element contains a class in JavaScript, we use classList.

For instance, we write

const hasClassName = element.classList.contains(className);

to check if the className class exists in the element with classList.contains.

Conclusion

To check if an element contains a class in JavaScript, we use classList.

Sometimes, we want to get div height with plain JavaScript.

In this article, we’ll look at how to get div height with plain JavaScript.

How to get div height with plain JavaScript?

To get div height with plain JavaScript, we use the clientHeight or offsetHeight properties.

For instance, we write

const clientHeight = document.getElementById("myDiv").clientHeight;
const offsetHeight = document.getElementById("myDiv").offsetHeight;

to get the div with getElementById.

Then we get the div’s height with the clientHeight and offsetHeight properties.

clientHeight includes the padding with the height.

And offsetHeight includes padding, scrollbar and border heights.

Conclusion

To get div height with plain JavaScript, we use the clientHeight or offsetHeight properties.

Sometimes, we want to load up CSS files using JavaScript.

In this article, we’ll look at how to load up CSS files using JavaScript.

How to load up CSS files using JavaScript?

To load up CSS files using JavaScript, we create a link element with createElement.

For instance, we write

const element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.head.appendChild(element);

to create a link element with createElement.

Then we call setAttribute to set the rel, type, and href attribute values.

Finally, we call document.head.appendChild to append the link element as the last child element of the head element.

Conclusion

To load up CSS files using JavaScript, we create a link element with createElement.