Month: May 2022

Sometimes, we want to change CSS :root color variables in JavaScript.

In this article, we’ll look at how to change CSS :root color variables in JavaScript.

How to change CSS :root color variables in JavaScript?

To change CSS :root color variables in JavaScript, we can use the document.documentElement.style.setProperty method.

For instance, we write

document.documentElement.style.setProperty("--your-variable", "#YOURCOLOR");

to call the document.documentElement.style.setProperty method to define the --your-variable CSS variable.

We set its value to #YOURCOLOR.

Conclusion

To change CSS :root color variables in JavaScript, we can use the document.documentElement.style.setProperty method.

Sometimes, we want to get the URL of script being called with JavaScript.

In this article, we’ll look at how to get the URL of script being called with JavaScript.

How to get the URL of script being called with JavaScript?

To get the URL of script being called with JavaScript, we can use the document.currentScript property.

For instance, we write

console.log(document.currentScript);

to log the value of the current script element being run.

Conclusion

To get the URL of script being called with JavaScript, we can use the document.currentScript property.

Sometimes, we want to addEventListener to multiple elements in a single line with JavaScript.

In this article, we’ll look at how to addEventListener to multiple elements in a single line with JavaScript.

How to addEventListener to multiple elements in a single line with JavaScript?

To addEventListener to multiple elements in a single line with JavaScript, we can loop through each element and call addEventListener on them.

For instance, we write

const elementsArray = [...document.querySelectorAll("input")];

elementsArray.forEach((elem) => {
  elem.addEventListener("input", () => {
    // ...
  });
});

to call querySelectorAll to select all input elements.

Then we use the spread operator to convert the returned node list to an array.

Next, we call elementsArray.forEach with a callback that calls elem.addEventListener to add an input event listener to each element elem.

Conclusion

To addEventListener to multiple elements in a single line with JavaScript, we can loop through each element and call addEventListener on them.

Sometimes, we want to remove a class from elements in pure JavaScript.

In this article, we’ll look at how to remove a class from elements in pure JavaScript.

How to remove a class from elements in pure JavaScript?

To remove a class from elements in pure JavaScript, we use the classList.remove method.

For instance, we write

Array.from(document.querySelectorAll(".widget.hover")).forEach((el) => {
  el.classList.remove("hover");
});

to select all elements with the widget and hover classes with querySelectorAll.

Then we call Array.from on the returned node list to convert it to an array.

Next, we call forEach with a callback that calls classList.remove to remove the hover class from each element el.

Conclusion

To remove a class from elements in pure JavaScript, we use the classList.remove method.

Sometimes, we want to make a "public static field" in a JavaScript class.

In this article, we’ll look at how to make a "public static field" in a JavaScript class.

How to make a "public static field" in a JavaScript class?

To make a "public static field" in a JavaScript class, we can create a static getter.

For instance, we write

class Agent {
  static get CIRCLE() {
    return 1;
  }
  static get SQUARE() {
    return 2;
  }
}

console.log(Agent.CIRCLE);

to define the CIRCLE and SQUARE getters in the Agent class.

Then we access them like Agent.CIRCLE.

Conclusion

To make a "public static field" in a JavaScript class, we can create a static getter.