在Javascript中,是否可以将两次样式属性添加到元素中？

Question

给定一个HTML Element对象,是否可以两次添加相同的样式属性而不必诉诸字符串操作？

请考虑以下示例:

<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>

据我所知,通过.style属性(例如element.style.color = "blue")或.style.setProperty方法(例如element.style.setProperty("color", "blue"))设置样式会覆盖现有的样式属性而不是附加它们.

拥有相同属性的多个定义允许我们利用CSS的级联性质,让我们在可用时使用更现代的CSS属性值,同时优雅地回归到"足够好"的值,其中不支持更新的添加.但是,我能看到做这样的事情的唯一方法是通过手动字符串操作.

Answer 1

除非你使用一些自定义的 javascript 函数，否则你想要做的事情是不可能的。

我想这是因为CSS 特异性的工作方式。

特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将被应用的方法。当特异性等于多个声明中的任何一个时，CSS 中找到的最后一个声明将应用于该元素。仅当多个声明以同一元素为目标时，特异性才适用。来源： https: //developer.mozilla.org/en-US/docs/Web/CSS/Specificity

因此，当您在属性中添加相同的property两次时style，由于特殊性，将应用第二个。.style.setProperty("propertyName", "propertyValue")当您使用或设置属性时，知道这是 Javascript 的“逻辑”行为element.style.propertyName = "propertyValue"。是覆盖相同的属性（如果已存在），而不是添加新的属性。