Categories
JavaScript Answers

How to retrieve the position (X,Y) of an HTML element with 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.

Categories
Angular Answers

How to add a conditional class with Angular *ngClass and JavaScript?

Sometimes, we want to add a conditional class with Angular *ngClass and JavaScript.

In this article, we’ll look at how to add a conditional class with Angular *ngClass and JavaScript.

How to add a conditional class with Angular *ngClass and JavaScript?

To add a conditional class with Angular *ngClass and JavaScript, we can use the class or ngClass attributes.

For instance, we write

<div [class.my_class]="step === 'step1'"></div>

to set the my_class class when step equals 'step1'.

We can also write

<div [ngClass]="{ my_class: step === 'step1' }"></div>

to do the same thing.

Conclusion

To add a conditional class with Angular *ngClass and JavaScript, we can use the class or ngClass attributes.

Categories
JavaScript Answers

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

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.

Categories
JavaScript Answers

How to get div height with plain JavaScript?

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.

Categories
JavaScript Answers

How to load up CSS files using JavaScript?

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.