несколько стилей на один обьект при многократном обращении

Question

Итак, есть у меня обьект:

<div id="block"></div>

И мне необходимо присвоить ему некоторые свойства. Обычно для этого я использовал style, но тут возникла проблема: если я несколько раз обращаюсь к style одного и того же элемента, то происходит затирание предыдущих настроек:

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

Итак, вопрос, как обойти данное ограничение?

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

Answer 1

element.style.property = 'value' не перезаписывает все инлайн-стили, а изменяет только конкретное свойство, которое вы указываете. Это подтверждается документацией:

"To add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleDeclaration object."

Каждое отдельное присвоение, например, element.style.opacity = '1';, действительно добавляет или изменяет только это свойство, не затрагивая остальные.

Однако проблема возникает при попытке задать весь стиль строкой, как, например, с element.style = "border: 1px solid black; color: red;". В этом случае действительно произойдет полное затирание всех предыдущих инлайн-стилей, потому что строка передается в cssText объекта стилей. Об этом и говорится в следующем абзаце документации:

"Using style in this manner will completely overwrite all inline styles on the element."

Проще говоря, если использовать отдельные свойства, как в вашем примере, то перезаписывания всех стилей не произойдет

Альтернативные способы управления стилями

cssText

let block = document.getElementById('block');
block.style.cssText += 'opacity: 1; border: 1px solid black; color: black;';
//Важно: если забыть про +=, то все предыдущие стили будут потеряны

setProperty

let block = document.getElementById('block');
block.style.setProperty('opacity', '1');
block.style.setProperty('border', '1px solid black');
block.style.setProperty('color', 'black');

let block = document.getElementById('block');
block.classList.add('new-style');

.default-style {
  opacity: 1;
  border: 1px solid red;
  color: red;
}

.new-style {
  opacity: 1;
  border: 1px solid black;
  color: black;
}

<div id="block" class="default-style"></div>

4.

Object.assign(block.style, {
  opacity: '1',
  border: '1px solid black',
  color: 'black'
});

let style = document.createElement('style');
style.textContent = '#block { opacity: 1; border: 1px solid black; color: black; }';
document.head.append(style);

let block = document.getElementById('block');
block.setAttribute('style', block.getAttribute('style') + '; opacity: 1; border: 1px solid black;');

Вывод: на мой взгляд

setProperty, cssText - гибкие и эффективные способы работы с большим количеством стилей

БЛОГ НА HUSL

несколько стилей на один обьект при многократном обращении

Ответы (1 шт):

Альтернативные способы управления стилями