У меня есть несколько переменных с цветами, которые я хочу изменить позже. Я хочу, чтобы у определенного класса был цвет фона из этой переменной. Каждый объект с этим классом должен быть этого цвета (навигация, нижний колонтитул и т. Д.). У меня есть что-то подобное, но не работает. Вы можете помочь?

// Set colors below:

var nhcp1 = "red";      // Color 1
var nhcp2 = "blue";     // Color 2
var nhcp3 = "pink";     // Color 3
var nhcp4 = "green";    // Color 4
var nhcp5 = "violet";   // Color 5

var d = document;



// Functions


window.onload = function () {
    
    // Functions for Color 1 ===============================
    
    d.querySelector(".nhcp1").style.backgroundColor = nhcp1;
    
    // Functions for Color 2 ===============================
    
    d.querySelector(".nhcp2").style.backgroundColor = nhcp2;
    
    // Functions for Color 3 ===============================
    
    d.querySelector(".nhcp3").style.backgroundColor = nhcp3;
    
    // Functions for Color 4 ===============================
    
    d.querySelector(".nhcp4").style.backgroundColor = nhcp4;
    
    // Functions for Color 5 ===============================
    
    d.querySelector(".nhcp5").style.backgroundColor = nhcp5;
    
};




0
Gibon 10 Окт 2021 в 00:52

4 ответа

Лучший ответ

На самом деле я не видел никаких проблем, но вы также можете кодировать это так

const
  d      = document
, colors =
  { nhcp1 : 'red'      // Color 1
  , nhcp2 : 'blue'     // Color 2
  , nhcp3 : 'pink'     // Color 3
  , nhcp4 : 'green'    // Color 4
  , nhcp5 : 'violet'   // Color 5
  }
for (let color in colors )
  d.querySelectorAll(`.${color}`)
   .forEach(el=>el.style.backgroundColor = colors[color])
<div class="nhcp1">bg 1</div>
<div class="nhcp2">bg 2</div>
<div class="nhcp3">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5">bg 5</div>

<div class="nhcp1">bg 1</div>
<div class="nhcp2">bg 2</div>
<div class="nhcp3">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5">bg 5</div>

<div class="nhcp1">bg 1</div>
<div class="nhcp2">bg 2</div>
<div class="nhcp3">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5">bg 5</div>
0
Mister Jojo 9 Окт 2021 в 22:16

Иногда, если вы запускаете скрипты, если элементы отсутствуют в DOM, стили не будут применяться,

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

const nhcp1 = 'red';
const nhcp2 = 'blue';
const nhcp3 = 'pink';
const nhcp4 = 'green';
const nhcp5 = 'violet';

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML =
  '.nhcp1{color:' +
  nhcp1 +
  '} .nhcp2{color:' +
  nhcp2 +
  '} .nhcp3{color:' +
  nhcp3 +
  '} .nhcp4{color:' +
  nhcp4 +
  '} .nhcp5{color:' +
  nhcp5 +
  '}';
document.getElementsByTagName('head')[0].appendChild(style);

Такой способ применения стилей должен решить вашу проблему.

0
Naveen Setty 9 Окт 2021 в 22:10

Этот код верен, и он работает. Сначала проверьте свой html. Затем Css. Наконец подумайте, может быть, есть перезапись для цвета фона.

0
MuratSenay 9 Окт 2021 в 22:37

Хорошо, я использовал этот код, и он работает, но

const
  d      = document
, colors =
  { nhcp1 : 'red'      // Color 1
  , nhcp2 : 'blue'     // Color 2
  , nhcp3 : 'pink'     // Color 3
  , nhcp4 : 'green'    // Color 4
  , nhcp5 : 'violet'   // Color 5
  }
for (let color in colors )
  d.querySelectorAll(`.${color}`)
   .forEach(el=>el.style.backgroundColor = colors[color])

У меня также есть этот код для экспорта моей страницы в pdf, но цвета не отображаются, когда я пытаюсь это сделать

function printDiv(divName) {
     var printContents = document.getElementById("printableArea").innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
};
0
Gibon 9 Окт 2021 в 23:01