Стоимость / преимущества использования различных способов стилизации HTML-элементов с помощью JavaScript

Question

Я недавно открыл один из своих веб-проектов в IntelliJ и заметил некоторые подсказки / ошибки в моем JavaScript, которые Netbeans не отображал.

Ошибка была:

> Assigned expression type string is not assignable to type CSSStyleDeclaration

Вотстрока, на которой он показывал:

password.style = "border: 2px solid red";

Хотя я подавил намек, прямо заявив, что я стиль, вот так:

password.style.border = "2px solid red";

Как кто-то упомянул в комментариях и язабыл о том, что есть другой способ установки стилей CSS, например:

password.setAttribute("style", "border: 2px solid red";);

У меня вопрос, в чем разница между тремя?Есть ли какие-либо последствия / риски с использованием первого способа?Есть ли лучшая практика?

Первый способ работает, насколько я знаю, во всех браузерах, которые я тестировал.Кроме того, кажется странным, что Netbeans не показал бы это как проблему / подсказку!

Answer 1

Согласно mdn , HTMLElement.style должен рассматриваться как доступный только для чтения и не использоваться для установки строки атрибута стиля;вместо этого это CSSStyleDeclaration, как вам сообщил IntelliJ.

Если вы не можете указать стиль в виде строки, вы можете сделать это, например, element.style.cssText = 'border: 2px solid red'.

* 1009.* РЕДАКТИРОВАТЬ: чтобы еще больше сузить ответ на ваш вопрос, это означает, что у вас больше нет доступа к объекту CSSStyleDeclaration и, поскольку он является неподдерживаемым средством установки стиля, вы рискуете получить противоречивые результаты или испортить код.