(CSS) user-modify. Редактирование по нажатию на кнопку

277
08 марта 2017, 19:47

В шаблоне используется свойство user-modify для всех тегов span.

span {
  display: block;
 -webkit-user-modify: read-write;
 -moz-user-modify: read-write;
  user-modify: read-write;
}

Как реализовать редактирование на странице по нажатию на кнопку (ВКЛ/ВЫКЛ)?

Answer 1

Переключать класс родителю и установить зависимость свойств для редактирования от переключаемого класса.

document.querySelector('button').onclick = function() { 
  document.querySelector('.editor').classList.toggle('active') 
}
.editor.active span { 
  display: block; 
  padding: 3px; 
  border: 1px dotted; 
 -webkit-user-modify: read-write; 
 -moz-user-modify: read-write; 
  user-modify: read-write; 
}
<button>Toggle modifying</button> 
<br><br> 
<div class=editor> 
  <span>asdasd</span> 
  <span>asdasd</span> 
  <span>asdasd</span> 
  <span>asdasd</span> 
  <span>asdasd</span> 
  <span>asdasd</span> 
  <span>asdasd</span> 
  <span>asdasd</span> 
</div>

READ ALSO
Дубли транзакций в Google Tag Manager

Дубли транзакций в Google Tag Manager

Есть магазин, сделан Data Layer на странице успешной покупки, при обновлении страницы он уже не выводится (хранится один раз в сессии)Стали появляться...

259
Получение данных из потока

Получение данных из потока

ПриветствуюПытаюсь получить данные из потока

326
Javascript - вложенность в HTML

Javascript - вложенность в HTML

Скажите плиз, почему при вложении в html --> script дальше второго условия не срабатывает? Работает только первое/одно условие, после добавления...

254