Author: John Au-Yeung

Sometimes, we want to determine distance from the top of a div to top of window with JavaScript.

In this article, we’ll look at how to determine distance from the top of a div to top of window with JavaScript.

How to determine distance from the top of a div to top of window with JavaScript?

To determine distance from the top of a div to top of window with JavaScript, we can use the top property.

For instance, we write

const el = document.getElementById("someElement");
const distanceFromTop = el.getBoundingClientRect().top;

to select the element with getElementById.

Then we call getBoundingClientRect to get an object with the distance from the top of the window to the top of the element with the top property.

Conclusion

To determine distance from the top of a div to top of window with JavaScript, we can use the top property.

Sometimes, we want to change element style attribute dynamically using JavaScript.

In this article, we’ll look at how to change element style attribute dynamically using JavaScript.

How to change element style attribute dynamically using JavaScript?

To change element style attribute dynamically using JavaScript, we can set the property in the element’s style property.

For instance, we write

document.getElementById("xyz").style["padding-top"] = "10px";

to select the element with ID xyz with

document.getElementById("xyz")

Then we set its padding-top style to '10px' by setting its style["padding-top"] property.

Conclusion

To change element style attribute dynamically using JavaScript, we can set the property in the element’s style property.

Sometimes, we want to use JavaScript to change the meta tags of the page.

In this article, we’ll look at how to use JavaScript to change the meta tags of the page.

How to use JavaScript to change the meta tags of the page?

To use JavaScript to change the meta tags of the page, we can set the properties that are available in a meta element.

For instance, we write

document.getElementsByTagName("meta")["keywords"].content =
  "My new page keywords!!";
document.getElementsByTagName("meta")["description"].content =
  "My new page description!!";

to select the meta tag with the name attribute set to keywords with

document.getElementsByTagName("meta")["keywords"]

and set its content attribute value.

Likewise, we select the meta tag with the name attribute description with

document.getElementsByTagName("meta")["description"]

and set its content attribute value.

Conclusion

To use JavaScript to change the meta tags of the page, we can set the properties that are available in a meta element.

Sometimes, we want to add global variables in JavaScript across multiple files.

In this article, we’ll look at how to add global variables in JavaScript across multiple files.

How to add global variables in JavaScript across multiple files?

To add global variables in JavaScript across multiple files, we can save our variable data in local storage.

To do this, we write

localStorage.setItem("data", 10);

to call localStorage.setItem with the key and value of the entry to save.

Then we can get the value saved with the key with

const number = localStorage.getItem("data");

We call getItem with the key of the entry to get to return the value.

Conclusion

To add global variables in JavaScript across multiple files, we can save our variable data in local storage.