title: Using document.querySelector('.').style. to change *two* CSS properties of a div
body: <p>Trying to set up a truncated textbox that expands to fullsize with a click/tap on the textbox. My div <code>.textbox</code> has <code>height:10em</code>, <code>overflow:hidden</code>, and there's a "there is more..." fade-out effect over the bottom third of the textbox using <code>.textbox:after {height: 3em; background: linear-gradient}</code> (<a href="https://css-tricks.com/line-clampin/" rel="nofollow noreferrer">found here</a> - see Fade Out Way). Found on SO a script for expanding <code>.textbox</code> to <code>height:auto</code>.   </p>
  
  <pre><code>&lt;script&gt;
  document.querySelector('.textbox').addEventListener('click', function() {
    document.querySelector('.textbox').style.height='auto';
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Problem is, the <code>.textbox:after</code> fade-out effect still covers the bottom 3em of the expanded textbox, obscuring the text. So, on click/tap, I need the script to change the padding-bottom of <code>.textbox</code> from 0 to 3em (as well as increase height to auto). 
  Can the script above handle those two changes? I've searched and only find examples for changing a single property, like color or  border (<a href="https://flaviocopes.com/javascript-style-dom/" rel="nofollow noreferrer">e.g. here</a>) or using javascript to <a href="https://stackoverflow.com/questions/33178114/using-queryselectorall-to-change-the-style-property-of-multiple-elements">change multiple divs</a>. I've tinkered, but the results are either the script doesn't work or it only effects height: auto.</p>
  
  <p><strong>Oops!</strong>
  Sorry, Little bug found in my setup when applying the answer. I also have a "Close" button within the textbox and if I click that, the textbox expands for a flash before closing. Tried giving the "Close" button a huge z-index, but no luck. So I need to move the queryselector from the entire textbox to the first paragraph (p class="expand") of text. So I guess I'd start with...</p>
  
  <pre><code>document.querySelector('.expand').addEventListener('click', function() {
    document.querySelector('.textbox').style.height='auto';
  </code></pre>
  
  <p>...but the <code>this.style.paddingBottom='2em';</code> has no effect. What do I do?</p>
  
  <p><strong>Final note.</strong> <a href="https://stackoverflow.com/questions/56689908/using-document-queryselector-style-to-change-two-css-properties-of-a-dif">Two solutions here....</a></p>