Given a HTML Element object, is it possible to add the same style property twice to it without having to resort to string manipulation?
Consider the following examples:
<div style="width: 90%; width: calc(100% - 5em);"></div>
<h1 style="font-weight: bold; font-weight: 800;"></h1>
<p style="color: #cccccc; color: rgba(255, 255, 255, 0.8);"></p>
element.style.color = "blue"
I guess this is because of the way CSS cascading works.
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. When specificity is equal to any of the multiple declarations, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
So when you add the same
property twice in the
.style.setProperty("propertyName", "propertyValue") or
element.style.propertyName = "propertyValue". is to overwrite the same property if it already exists, instead of adding a new one.