`style.setProperty / getPropertyValue` în JavaScript

Setează, citește și șterge stilurile CSS scrise direct pe element, inclusiv variabilele CSS (--culoare).

Sintaxă

element.style.setProperty(proprietate, valoare, "important")
element.style.getPropertyValue(proprietate)
element.style.removeProperty(proprietate)

Ce face `style.setProperty / getPropertyValue`

element.style.color = "red" merge pentru proprietățile obișnuite, scrise în camelCase. setProperty primește numele CSS cu cratimă ("background-color"), acceptă "important" și este singura cale de a seta variabile CSS ("--culoare-principala").

getPropertyValue citește valoarea scrisă pe element (nu pe cea rezultată din clase), iar removeProperty o șterge și returnează valoarea veche. Pentru valoarea finală, calculată, folosește getComputedStyle.

Parametri

Parametru	Descriere
`proprietate`	Numele CSS, cu cratimă, sau o variabilă (`--nume`).
`valoare`	Valoarea, ca text.
`prioritate`	Opțional. `"important"`.

Ce returnează

getPropertyValue și removeProperty: text. setProperty: undefined.

Exemple

Exemplul 1: O temă schimbată prin variabile CSS

const radacina = document.documentElement;

radacina.style.setProperty("--culoare-principala", "#0a7d3b");
console.log(radacina.style.getPropertyValue("--culoare-principala"));

const card = document.querySelector(".card");
card.style.setProperty("border-color", "red", "important");
console.log(card.style.getPropertyPriority("border-color"), card.style.removeProperty("border-color"));

Rezultat în browser

#0a7d3b
important red

Greșeli frecvente

Scrii element.style["--culoare"] = "red". Variabilele CSS nu merg așa; folosește setProperty.

Comenzi înrudite

getComputedStyle: Returnează stilurile finale ale unui element, după aplicarea tuturor regulilor CSS.
classList: Adaugă, scoate sau comută clase CSS pe un element.
matchMedia: Verifică din JavaScript o interogare media CSS: ecran mic, temă întunecată, mișcare redusă.

Ce face style.setProperty / getPropertyValue