Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.06.2024, 21:52
Новичок на форуме
Отправить личное сообщение для LeuS Посмотреть профиль Найти все сообщения от LeuS
 
Регистрация: 11.06.2024
Сообщений: 1

cssStyleSheet
Допустим у меня есть N-ное количество элементов DOM с классом, например, switchableVisibility {...}
Могу ли поменять видимость с {visibility: visible;} на {visibility: hidden;} или наоборот?
Не перебирая элементы через .querySelectorAll или ещё как, не меняя стили или добавляя стили через .classList.add/remove каждому элементу, а поменять свойство самого стиля класса? Как то через document.styleSheets чтобы одним движением поменять видимость всем элементам с этим классом?
На MDN пишут, что cssStyleSheet.insertRule(`${selector} {${styles}}`, 0); теперь deprecated, хотя всеми браузерами поддерживается. Но в любом случае я что-то не пойму как пользоваться .insetRule для смены правила.
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2024, 09:01
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,761

Необязательно взаимодействовать с CSSRule, чтобы изменять стили, можно сделать как-то так:
<style>
.square {
  --bg: red;
  
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--bg);
}
</style>
<style id="runtime-styles"></style>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

<div>
  <button type="button">Switch color</button>
</div>

<script>
var color = 'red';

document.querySelector('button')?.addEventListener('click', () => {
  const selector = '#runtime-styles';
  const styleNode = document.querySelector(selector);
  if (!styleNode) {
  	return void console.error(`Element [${selector}] not found`);
  }
  
  styleNode.textContent = `.square {--bg: ${color = (color === 'red' ? 'blue' : 'red')}}`;
});
</script>


Сообщение от LeuS
На MDN пишут, что cssStyleSheet.insertRule [...] теперь deprecated
Что-то не вижу такого.
https://developer.mozilla.org/en-US/...ule/insertRule
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2024, 12:19
Профессор
Отправить личное сообщение для Severtain Посмотреть профиль Найти все сообщения от Severtain
 
Регистрация: 25.04.2011
Сообщений: 280

Как вариант, можно создавать <style> на странице и задавать условия для Вашего класса. Главное не плодить их при изменениях, а перезатирать уже добавленный (можно через атрибут пометить dom)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск