title: Is it possible, in Javascript, to add a style property twice to an element?
body: <p>Given a HTML Element object, is it possible to add the same style property twice to it without having to resort to string manipulation?</p>
  
  <p>Consider the following examples:</p>
  
  <pre><code>&lt;div style="width: 90%; width: calc(100% - 5em);"&gt;&lt;/div&gt;
  &lt;h1 style="font-weight: bold; font-weight: 800;"&gt;&lt;/h1&gt;
  &lt;p style="color: #cccccc; color: rgba(255, 255, 255, 0.8);"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>As far as I can tell, setting styles through the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style" rel="noreferrer"><code>.style</code></a> property (e.g. <code>element.style.color = "blue"</code>) or the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration" rel="noreferrer"><code>.style.setProperty</code></a> method (e.g. <code>element.style.setProperty("color", "blue")</code>) overwrites existing style properties instead of appending them.</p>
  
  <p>Having multiple definitions of the same property allows us to take advantage of the cascading nature of CSS, letting us use more modern CSS property values when they're available while gracefully falling back to "good-enough" values where more recent additions are not supported. However, the only way I can see to do something like this is through manual string manipulation.</p>