给对象上课

Question

我有一些带有颜色的变量，我想稍后更改。我希望某些类具有该变量的背景颜色。具有该类的每个对象都应该是该颜色（导航、页脚等）。我有类似的东西，但它不起作用。你能帮忙吗？

// 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;
    
};

Answer 1

其实我没看出有什么问题，不过你也可以这样编码

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>

，我该如何修改它，例如 class nhcp1txt 将使文本 nhcp1 颜色（当然我也想要以前的背景颜色，我想添加另一个类）？

这样：

const
  d      = document
, colors =
  [ { cls: 'nhcp1',    cr: 'red',    st:'backgroundColor' }
  , { cls: 'nhcp2',    cr: 'blue',   st:'backgroundColor' } 
  , { cls: 'nhcp3',    cr: 'pink',   st:'backgroundColor' } 
  , { cls: 'nhcp4',    cr: 'green',  st:'backgroundColor' } 
  , { cls: 'nhcp5',    cr: 'violet', st:'backgroundColor' } 
  , { cls: 'nhcp1txt', cr: 'blue',   st:'color'  } 
  , { cls: 'nhcp2txt', cr: 'yellow', st:'color'  } 
  ];

for (let {cls, cr, st} of colors )
  d.querySelectorAll(`.${cls}`)
   .forEach( el=> el.style[st] = cr )

<div class="nhcp1 nhcp1txt">bg 1</div>
<div class="nhcp2 nhcp2txt">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 nhcp1txt">bg 3</div>
<div class="nhcp4">bg 4</div>
<div class="nhcp5 nhcp2txt">bg 5</div>

Answer 2

有时，如果您在 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);

这种应用样式的方式应该可以解决您的问题。

Answer 3

此代码为 True，并且正在运行。请先检查您的 html。 然后Css。最后想想可能是背景颜色的覆盖。

Answer 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])

我也有这段代码可以将我的页面导出为 pdf，但是当我尝试执行此操作时不显示颜色（代码使它只有 #printableArea 在 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;
};