我有一些顏色的變數，我想稍后更改。我希望某些類具有來自該變數的背景顏色。具有該類的每個物件都應該是那種顏色（導航、頁腳等）。我有這樣的東西，但它不起作用。你能幫我嗎？
// 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;
};
uj5u.com熱心網友回復：
有時，如果元素不存在于 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);
這種應用樣式的方式應該可以解決您的問題。
uj5u.com熱心網友回復：
這段代碼是真的，它正在作業。請先檢查你的 html。然后 Css.Finally 想想也許有一個覆寫背景顏色。
uj5u.com熱心網友回復：
事實上我沒有看到任何問題，但你也可以這樣編碼
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>，我該如何修改它，例如類 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>uj5u.com熱心網友回復：
好的，我使用了這個代碼并且它有效，但是
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，但是當我嘗試執行此操作時顏色不顯示（代碼使其僅在 pdf 中可見 #printableArea）
function printDiv(divName) {
var printContents = document.getElementById("printableArea").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/320781.html
標籤：javascript 查询 班级 变量