Как задать несколько стилей одному элементу одной строкой с помощью style в JS?

Question

[Mesuti]

Привет!
Допустим, есть блок:
<div id="block"></div>
И с помощью js задаем ему стили:

document.getElementById('block').style.opacity='1';
document.getElementById('block').style.border='1';
document.getElementById('block').style.color='black';

Как задать ему сразу несколько стилей одной строкой js ?

Answer 1

[Никита Егоров]

https://learn.javascript.ru/styles-and-classes#стр...

document.getElementById('block').style.cssText= `
    opacity: 1;
    border: 1;
    color: black;
`

Comments

[Pavel Beloborodov]

А как вместо стилей прописать сюда получаемые значения
Вместо opacity: 1; ---- userOpacity

[mr_alek3]

Pavel Beloborodov,

const userOpacity = 1;

document.getElementById('block').style.cssText= `
    opacity: ${userOpacity};
    border: 1;
    color: black;
`

Answer 2

[0xD34F]

Под одной строкой вы подразумеваете однократное обращение к элементу, да?

Object.assign(document.querySelector('#block').style, {
  opacity: '1',
  border: '1',
  color: 'black',
});