title: document.activeElement - different browser behavior
body: <p>I want to click on one of several buttons and show it has been clicked on by changing a property e.g.:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function clickMeFunction() {
    var curElement =  document.activeElement;
    curElement.style.borderColor = "red";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="clickMeFunction()"&gt;Click me to border color red&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works on Chrome but not on Safari or Firefox.  The best way to see the problem is to <a href="https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_activeelement" rel="nofollow noreferrer">run the W3 "try it" for activeElement</a>, and click on the button.</p>
  
  <p>On Chrome, it says the active element is BUTTON but the active element is BODY on Safari and Firefox.  Yet W3 also says that all major browsers support activeElement.  What am I missing and how do I select the button that I just clicked on so I can highlight it on all browsers?</p>
  
  <p>thank you</p>