Скрипт изменения цвета

140
28 июня 2021, 09:10

В общем то есть сайт,и с ним проблема..на сайте есть множество всплывающих окон, вагон и маленькая тележка, цвет фона всех этих элементов - #4b4b4b. А дело то в том,что цвета на сайте все белых оттенков, основные элементы красные..есть ли скрипт которым можно на всем сайте заменить цвет #4b4b4b на #f3f3f3?

Answer 1

Выбираете все нужные элементы селекторами и в css задаете стиль самом конце, переопределяя его.

/*Конец файла*/
.items {
    color: #f3f3f3;
}

JavaScript'ом можно сделать вот так (тоже подключить в самый конец):

items = document.querySelectorAll('.class');
items.forEach(function(i){
    i.style.color = '#f3f3f3';
});

Если много разных классов, то использовать селектор по цвету:

items = document.querySelectorAll('.class[style="color: #f3f3f3"]');
items.forEach(function(i){
    i.style.color = '#f3f3f3';
});

Если нужны только выборочные элементы и их тоже много, то только ручками, или у них нет атрибута style.

Answer 2

Допустим у нас модальные окна с классом modal. У Вас нет полного доступа к стилям, но доступы всё же есть! создайте класс active и добавляйте его на все модальные окна. В данном классе указываёте Ваш цвет (в коде ниже красится в красный для лучшего обзора )

Если у каждого модального окна разный класс и нет вообще ничего общего!мтогда придётся писать код вроде того который ниже для каждого элемента. Как правило, у окон всплывающих должны быть разные id, а классы определяющие что это всплывающие окна могут повторяться для задания тех же общих цветов фона! Лучше скиньте примерную структуру шаблона, уверен у них есть какой-либо общий класс!

var modal = document.querySelectorAll('.modal'); 
modal.forEach(function(item) { 
  setTimeout(function() { 
    item.classList.add('active') 
  }, 400); 
});
.modal { 
  background-color: #4b4b4b; 
  width: 100px; 
  height: 100px; 
  margin: 0 10px; 
} 
 
body { 
  background: white; 
} 
 
.cont { 
  display: flex; 
  width: 100%; 
  align-items: center; 
} 
 
.active { 
  background-color: red !important/*#f3f3f3*/; 
}
<div class="cont"> 
  <div class="modal"></div> 
  <div class="modal"></div> 
  <div class="modal"></div> 
  <div class="modal"></div> 
  <div class="modal"></div> 
</div>

READ ALSO
Почему Popup открывается под другим Popup?

Почему Popup открывается под другим Popup?

Имеется ситуация: с главной формы открывается первый popup (картинка #1)После этого на нём при двойном клике открывается второй popup (картинка...

101
Привязка блока в к определённому месту background

Привязка блока в к определённому месту background

Всем привет Подскажите есть ли решение привязать блок с видео в определённую часть backgroundчто бы в последующем подставить фон в видео, что...

114
Как корректно скрыть сообщения на странице Magento 2 после заданного таймаута?

Как корректно скрыть сообщения на странице Magento 2 после заданного таймаута?

Дано: Magento2, различные сообщения на странице ( о добавление товара в корзину, к сравнению, в вишлист и тд )По дефолту все сообщения продолжают...

113
Где хранить данные в web-приложении?

Где хранить данные в web-приложении?

Есть примерно такая форма, которую я сверстал на HTML и BOOTSTRAPСуть проекта в том, чтобы можно было просматривать небольшие отчеты о проделанной...

126