Category: JavaScript

Sometimes, we want to set or copy JavaScript computed style from one element to another.

In this article, we’ll look at how to set or copy JavaScript computed style from one element to another.

How to set or copy JavaScript computed style from one element to another?

To set or copy JavaScript computed style from one element to another, we can loop through each style and call the setProperty method to set the styles on the target element.

For instance, we write:

<div style='background-color: green; height: 100px; width: 100px'>

</div>
<section></section>

to add a div and a section element.

Then we copy the styles of the div to the section element by writing:

const copyNodeStyle = (sourceNode, targetNode) => {
  const computedStyle = window.getComputedStyle(sourceNode);
  for (const key of computedStyle) {
    targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key))
  }
}

const div = document.querySelector('div')
const section = document.querySelector('section')
copyNodeStyle(div, section)

We define the copyNode function that takes the sourceNode and targetNode.

In it, we get the sourceNode‘s styles with window.getComputedStyle.

Then we loop through the computedStyle iterable object with the for-of loop.

We get the style from the sourceNode with computedStyle.getPropertyValue(key).

And we get the priority of the style with computedStyle.getPropertyPriority(key).

Then we set the styles with setProperty.

As a result, we see that the section element has the same styles as the div after the loop is run.

Conclusion

To set or copy JavaScript computed style from one element to another, we can loop through each style and call the setProperty method to set the styles on the target element.

Sometimes, we want to select DOM elements in Chrome console with JavaScript.

In this article, we’ll look at how to select DOM elements in Chrome console with JavaScript.

How to select DOM elements in Chrome console with JavaScript?

To select DOM elements in Chrome console with JavaScript, we can use the console.dir method to see the selected element’s properties.

For instance, we type in:

console.dir(document.getElementById("hello"));

to select the element with ID hello with getElementById.

Then we pass that in as the argument of console.dir to see the properties of the selected element object instead of its markup.

Conclusion

To select DOM elements in Chrome console with JavaScript, we can use the console.dir method to see the selected element’s properties.

Sometimes, we want to merge duplicate objects in array of objects with JavaScript.

In this article, we’ll look at how to merge duplicate objects in array of objects with JavaScript.

How to merge duplicate objects in array of objects with JavaScript?

To merge duplicate objects in array of objects with JavaScript, we can use the array map method.

For instance, we write:

const data = [{
    label: "Book1",
    data: "US edition"
  },
  {
    label: "Book1",
    data: "UK edition"
  },
  {
    label: "Book2",
    data: "CAN edition"
  }
];
const newData = [...new Set(data.map(d => d.label))].map(label => {
  return {
    label,
    data: data.filter(d => d.label === label).map(d => d.data)
  }
})

console.log(newData)

to merge the items with the label value together.

To do this, we get an array of labels without the duplicates with [...new Set(data.map(d => d.label))].

Then we call map again with a callback to return an object with the data properties from the objects that has the same label values.

As a result, newData is:

[
  {
    "label": "Book1",
    "data": [
      "US edition",
      "UK edition"
    ]
  },
  {
    "label": "Book2",
    "data": [
      "CAN edition"
    ]
  }
]

Conclusion

To merge duplicate objects in array of objects with JavaScript, we can use the array map method

Sometimes, we want to reset an input control’s border color with JavaScript.

In this article, we’ll look at how to reset an input control’s border color with JavaScript.

How to reset an input control’s border color with JavaScript?

To reset an input control’s border color with JavaScript, we can use the removeProperty method.

For instance, we write:

<input style='border-color: red'>

to add an input with a red border.

Then we write:

setTimeout(() => {
  document.querySelector('input').style.removeProperty('border-color');
}, 2000)

to select the input with querySelector.

Then we remove the border-color CSS property from the styles with removeProperty.

We put it in the setTimeout callback to remove the border in 2 seconds.

Conclusion

To reset an input control’s border color with JavaScript, we can use the removeProperty method.