Nadanie klasy obiektom

0

Mam kilka zmiennych z kolorami (będą potem zmieniane). Chciałbym, aby dana klasa miała przypisany kolor tła z danej zmiennej. Każdy obiekt z tą klasą miałby ten kolor.
Ale nie działa. Jak to naprawić?


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


2

Tytuł brzmi: nadanie klasy obiektom.
https://www.w3schools.com/howto/howto_js_add_class.asp

W treści piszesz o: przypisywaniu kolorów klasom.
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

Kod realizuje: modyfikację stylu obiektów (złapanych w oparciu o klasę).
Podany kod działa, jeśli kod ci nie działa, napisz, jakie masz komunikaty błędu.

1

YYyyy, ale co Ty w ogóle próbujesz zrobić?

Te zmienne w których są kolory, będą zmieniane potem? Czy te kolory są wpisane na stałe? Próbujesz zrobić tak że jak zmienisz wartość tych zmiennych, to zmieni się kolor w tych klasach CSS? Czy po prostu szukasz miejsca żeby trzymać kolory w jednym miejscu?

Bo wydaje mi się że to co chcesz zrobić można by rozwiązać zmiennymi CSS:

Deklarujesz zmienne w CSS oraz używasz ich w klasach CSS. Możesz je nawet zmieniać na :hover albo :focus jeśli chcesz. Np zmienne mogłyby mieć taki color na :hover, a inny na :focus, a na :active jeszcze inny:

:root {
  --first: red;
  --second: blue;
  --third: pink;
}

.nhcp1 {
  color: var(--first);
}
.nhcp2 {
  color: var(--second);
}
.nhcp2 {
  color: var(--third);
}

A jeśli chciałbyś je podmienić w runtimie, w JavaScript, to robisz tak:

document.documentElement.setProperty('--first', "red"); // ustaw pierwszą na czerwony
document.documentElement.setProperty('--second', "green"); // ustaw drugą na zielone
document.documentElement.setProperty('--third', "blue"); // ustaw trzecią na niebieski

Raczej unikaj robienia element.style.color bo to nieodwracalnie zmiena styl i ustawia je "na twardo", także ciężko je potem naprawić. Do stylowania raczej używaj tylko CSS, i w JavaScript najwyżej dodaj/usuń klasy i zmień zmienne CSS, samych stylów raczej nie edytuj bezpośrednio.

Gibon378 napisał(a):

Mam kilka zmiennych z kolorami (będą potem zmieniane). Chciałbym, aby dana klasa miała przypisany kolor tła z danej zmiennej.

Tylko w sumie pytanie czemu chcesz tak zrobić? Czemu te kolory mają siedzieć w zmiennych JS?

0

@Gibon378:

Każdy obiekt z tą klasą miałby ten kolor.

A... no to kumam, w czym problem:

tab_e = document.querySelectorAll(".nhcp1");
for (i=0; i<tab_e.length;; i++) {
  tab_e[i].style.backgroundColor = nhcp1;
}

Ale łatwiej będzie zmodyfikować samą klasę CSS niż wielokrotnie mielić wiele kolekcji obiektów:
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

1 użytkowników online, w tym zalogowanych: 0, gości: 1