Using Document.queryselector('.').style. To Change *two* Css Properties Of A Div

Trying to set up a truncated textbox that expands to fullsize with a click/tap on the textbox. My div .textbox has height:10em, overflow:hidden, and there's a 'there is more...' fa

Solution 1:

You just set the other property as well. The changes don't take effect until the browser re-renders anyway (after your JavaScript event handler has returned);

document.querySelector('.textbox').addEventListener('click', function() {
  this.style.height='auto';
  this.style.paddingBottom='3em';
});

Notice that you can use this to refer to the element within the handler, no need to go find it again.

---

However, I would recommend defining a class for this and then adding/removing it as necessary, rather than using direct style properties.

Solution 2:

Are you looking for something like this?

<script>const textbox = document.querySelector('.textbox');
textbox.addEventListener('click', function() {
  textbox.style.height = 'auto';
  textbox.style.paddingBottom ='3em';
});
</script>