Как вернуть элементу начальные свойства?

Question

[mydarck]

Добрый день.
Ситуация следующая: есть DIV, которому задано свойство inline. В определенный момент ему задается другое свойство, например: none, а затем нужно снова вернуть inline.
Для этого нужно получить и как-то уберечь его начальное значение от перезаписи, чтобы затем его можно было вернуть.
Предполагаю, что это как-то можно сделать с помощью замыкания, но пока не смог это реализовать.
Строго менять свойство нельзя, потому-что оно динамическое. Может быть: inline, block, none... Мне нужно его именно получить и запомнить. Потом с данным блоком могут происходить различные манипуляции, включающие замену данного свойства. И по окончанию мне нужно вернуть сохраненное свойство данному блоку.
Подскажите, пожалуйста, как этом можно сделать?

Comments

[Вадим]

Как по мне, самый простой тут для Вас способ будет записывать при смене на отличное от начального в data-initial-display нужное значение. И когда нужно вернуть, считывайте из него и устанавливайте.

Если display начальный укзаан в css, то получить его можно через getComputedStyle(element).display

Только без фанатизма. Этот метод может тригерить перерисовку страницы.

[mydarck]

Вадим, добрый день. Да, это не плохой вариант, спасибо. Нужно попробовать.

[Вадим]

mydarck, Но если Вы меняете display через el.style.display, а начальное значение в css, то ответ Сергей delphinpro намного лучше.

[Сергей Соколов]

не понятно, как элементу задаётся свойство, которое затем хочется вернуть:

• атрибутом style непосредственно элементу
  
• добавлением класса
  
• изменением CSS класса или id элемента
  
• изменением CSS родительских элементов div.parent > div
  

[mydarck]

Вадим, нет не в начальное. Элементу задано свойство в CSS. Получаю его, затем меняю, после возвращаю. Ваш вариант мне больше подходит.

[Сергей Сергей]

Предполагаю, что за вопросом скрыта попытка создать какую-то "изящную" форму инкапсуляции. Почему явным образом нельзя следить за состоянием элемента? Что мешает возвращать элементу первоначальное состояние из тех же функций, что его меняют?

[mydarck]

Сергей Сергей, абсолютно верно. Ситуация такая: функция принимает селектор элемента чьё свойство нужно получить. Свойство задано в стилях. Затем по событию scroll это свойство меняется. В зависимости от направления прокрутки оно изменяется то в одно, то в другое значение. У меня сложность возникает именно в том, чтобы сохранить не перезаписав значение этого свойства. Я его получил, изменил, но вернуть не могу, так как при изменение из-за отсутствия инкапсуляции оно перезаписалось. В коде условно это выглядит так:

function getDefaultPropert(selector) {
  let element = document.querySelector(selector);
  let property = getComputedStyle(element).display;
   ...
   return property; 
}
document.querySelector('div')sytle.display = 'none';
...
window.addEventListener('scroll', () => {
let element = document.querySelector('div');
element.style.display = getDefaultPropert(selector);
});

Answer 1

[Сергей delphinpro]

const div = document.querySelector('....');

div.style.display = 'none'; // скрываем
div.style.display = ''; // возвращаем обратно, чтобы там ни стояло

Comments

[mydarck]

Сергей, добрый день. Сначала мы удалим значение div.style.display, то DIV станет блочным элементом, то есть получит своё свойство по умолчанию. Это не совсем то, что нужно. Нужно получить значение свойства display, сохранить, изменить, вернуть.

[Сергей delphinpro]

mydarck, Он станет таким, каким задан в css/ Если у вас написано

div { display: inline; }

то после div.style.display = ''; ему вернется значение inline

[mydarck]

Сергей delphinpro, а, да, Вы правы. Стоит попробовать.