Categories
JavaScript Answers

How to Check the HTML Element’s CSS display Property Value with JavaScript?

Sometimes, we want to check the HTML element’s CSS display property value with JavaScript.

In this article, we’ll look at how to check the HTML element’s CSS display property value with JavaScript.

Check the HTML Element’s CSS display Property Value with JavaScript

To check the HTML element’s CSS display property value with JavaScript, we can use the window.getComputedStyle method with the element we want to get the display property for.

We can also use the style.display property if the display CSS property value isn’t inherited from another location.

For instance, if we have the following HTML:

<div style='display: inline'>
  hello world
</div>

Then we can get the display property by writing:

const element = document.querySelector('div')
const {
  display
} = window.getComputedStyle(element, null);
console.log(display)

console.log(element.style.display);

First, we get the div with document.querySelector .

We call getComputedStyle with the element to get an object with the styles of element .

Then we get the display property from the returned object.

Also, we use the element.style.display property to get the display CSS property value.

Therefore, both console logs should log 'inline' .

Conclusion

To check the HTML element’s CSS display property value with JavaScript, we can use the window.getComputedStyle method with the element we want to get the display property for.

We can also use the style.display property if the display CSS property value isn’t inherited from another location.

Categories
JavaScript Answers

How to Make TinyMCE Paste in Plain Text by Default?

Sometimes, we want to make TinyMCE paste in plain text by default.

In this article, we’ll look at how to make TinyMCE paste in plain text by default.

Make TinyMCE Paste in Plain Text by Default

To make TinyMCE paste in plain text by default, we can set the paste_as_text option to true .

For example, we can write the following HTML:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<textarea id="mytextarea">Hello, World!</textarea>

to add the TinyMCE script and a text area for the TinyMCE editor.

Then we can convert the text area to a TinyMCE editor with the following JavaScript code:

tinymce.init({
  selector: '#mytextarea',
  plugins: "paste",
  paste_as_text: true
});

We call the tinymce.init method with an object that has the selector , plugins , and paste_as_text properties.

selector is the selector of the text area to convert to a TinyMCE editor.

plugins is set to 'paste' to add the paste plugin to let us control pasting text.

And we set paste_as_text to true to make TinyMCE paste text as plain text.

Conclusion

To make TinyMCE paste in plain text by default, we can set the paste_as_text option to true .

Categories
JavaScript Answers

How to Get the Last Item in a JavaScript Object?

Sometimes, we want to get the last item in a JavaScript object.

In this article, we’ll look at how to get the last item in a JavaScript object.

Get the Last Item in a JavaScript Object

To get the last item in a JavaScript object, we can use the Object.entries method to get the key-value pair arrays of an object in an array.

Therefore, we can use it to get the last item of the JavaScript object.

For instance, we can write:

const obj = {
  'a': 'apple',
  'b': 'banana',
  'c': 'carrot'
}
const entries = Object.entries(obj)
const [last] = entries.slice(-1)
console.log(last)

We have the obj object that we want to get the last property from.

Next, we call Object.entries with obj to get an array of key-value pair arrays of obj .

Then we call slice with -1 to return an array with the last entry of entries .

And we destructure that and assign it to last .

Therefore, last is:

["c", "carrot"]

Conclusion

To get the last item in a JavaScript object, we can use the Object.entries method to get the key-value pair arrays of an object in an array.

Therefore, we can use it to get the last item of the JavaScript object.

Categories
JavaScript Answers

How to Filter or Map Nodelists with JavaScript?

Sometimes, we want to filter or map nodelists with JavaScript.

In this article, we’ll look at how to filter or map nodelists with JavaScript.

Filter or Map Nodelists with JavaScript

To filter or map nodelists with JavaScript, we can use the spread operator to convert the nodelist to an array.

For instance, if we have the following HTML:

<p>
  foo
</p>
<p>
  bar
</p>

Then we can convert the nodelist with the selected p elements and call map and filter on it by writing:

const nodes = document.querySelectorAll('p')
const texts = [...nodes].map(n => n.textContent)
console.log(texts)
const filtered = [...nodes].filter(n => n.textContent.includes('foo'))
console.log(filtered)

We call document.querySelectorAll to return a nodelist with the p elements.

Then we use the spread operator to spread the items in the nodes nodelist into an array.

And then we call map to map the node array to an array of text.

Then we call filter on the array of nodes with a callback to return the nodes with textContent that includes 'foo' .

Therefore, texts is [“n foon”, “n barn”]

And filtered has an array with the first p element.

Conclusion

To filter or map nodelists with JavaScript, we can use the spread operator to convert the nodelist to an array.

Categories
JavaScript Answers

How to Get the Text Nodes of an Element with JavaScript?

Sometimes, we want to get the text node of an element with JavaScript.

In this article, we’ll look at how to get the text node of an element with JavaScript.

Get the Text Nodes of an Element with JavaScript

To get the text node of an element with JavaScript, we can use the document.createNodeIterator method to iterate through all the text nodes.

For instance, if we have the following HTML:

<p>
  <br>some text<br>123
</p>

We can write:

let root = document.querySelector('p'),
  iter = document.createNodeIterator(root, NodeFilter.SHOW_TEXT),
  textnode;

while (textnode = iter.nextNode()) {
  console.log(textnode.textContent)
}

to select the p element with document.querySelector .

Then we create the iterator that returns the text nodes of the p element with document.createNodeIterator method.

We call it with the root element and NodeFilter.SHOW_TEXT specifies that it returns the text nodes.

Finally, we have the while loop that gets the text nodes from the iterator with the iter.nextNode method.

Then we see the text node values logged in the console log with the textnode.textContent property.

Conclusion

To get the text node of an element with JavaScript, we can use the document.createNodeIterator method to iterate through all the text nodes.