Возможно ли в 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, второй будет применен в силу специфики. Зная это «логическое» поведение для Javascript при настройке свойств с помощью .style.setProperty("propertyName", "propertyValue") или element.style.propertyName = "propertyValue". это перезаписать одно и то же свойство, если оно уже существует, вместо добавления нового.

Answer 2

Существует много способов выполнить задачу, указанную в вашем вопросе. (Все еще интересно, где же особый случай).

Чистое бытие, возможно, с использованием классов, непосредственно в вашем файле CSS.
Другой, добавляя элемент <style> с вашими динамически создаваемыми правилами в документе.
Вы даже можете добавить новые правила к текущему document.styleSheets.

Но я остановлюсь только на предпосылке вашего вопроса.

• Во-первых, чтобы получить точно такую ​​же разметку, как и в ваших блоков кода, вы можете просто использовать element.setAttribute('style', 'prop1: val1; prop1:val2; prop1:val3').
  Те же правила, что и раньше, будут применяться.

• Во-вторых, игнорирование значения свойства style элемента с помощью js будет проигнорировано, как и в CSS.

document.body.style.backgroundImage = 'url("http://fakeserver.com/myGradientFallback.png")'; 
 
document.body.style.backgroundImage = 'linear-gradient(to right, #499bea 0%,#ff51fc 53%,#207ce5 100%)'; 
 
document.body.style.backgroundImage = 'awesome-property-that-your-browser-doesnt-support-yet(100%)';

Таким образом, вы можете быть безопасно, используя только тот же каскадные, как CSS делает из ваших JS скриптов.