webentwicklung-frage-antwort-db.com.de

Wie bearbeite ich eine CSS-Variable mit JS?

Ich habe diese CSS-Variablen, um die Farben meines Projekts zu steuern, damit ich das Theming ausführen kann. 

html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

Unabhängig davon, wie ich versuche, das Attribut zu ändern (die zwei kommentierten Zeilen wurden separat versucht), die nächste, die ich bekomme, ist, kein gültiges Attribut zurückzugeben.

function loadTheme() {
    var htmlTag = document.getElementsByTagName("html");
    var yourSelect = document.getElementById( "themeSelect" );
    var selectedTheme = ( yourSelect.options[ yourSelect.selectedIndex ].value );
    // htmlTag[0].setAttribute('--main-text-color', '#FFCF40');
    // $("html").css("--main-text-color","#FFCF40");
}

the error message

javascriptjquerycss
24
David Richards

Es stellt sich heraus, dass das Ändern von CSS-Variablen mit der el.style.cssText-Eigenschaft oder den el.style.setProperty- oder el.setAttribute-Methoden möglich ist. In Ihren Code-Snippets wird el.setAttribute falsch verwendet, was den aufgetretenen Fehler verursacht. Hier ist der richtige Weg:

var html = document.getElementsByTagName('html')[0];
html.style.cssText = "--main-background-color: red";

oder

var html = document.getElementsByTagName('html')[0];
html.style.setProperty("--main-background-color", "green");

oder

var html = document.getElementsByTagName('html')[0];
html.setAttribute("style", "--main-background-color: green");

Demo

Die folgende Demo definiert eine Hintergrundfarbe mithilfe einer CSS-Variablen und ändert sie dann mithilfe des JS-Snippets 2 Sekunden nach dem Laden. 

window.onload = function() {
  setTimeout(function() {
    var html = document.getElementsByTagName('html')[0];
    html.style.cssText = "--main-background-color: red";
  }, 2000);
};
html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

body {
  background-color: var(--main-background-color);
}

Dies funktioniert nur in Browsern, die offensichtlich CSS-Variablen unterstützen. 

19
Brett DeWoody

Wenn Sie :root verwenden:

:root {
    --somevar: black;
}

Es wird documentElement sein.

document.documentElement.style.setProperty('--somevar', 'green');
14
Blauhirn

Sie können einfach die Standardmethode zum Festlegen beliebiger CSS-Eigenschaften verwenden: setProperty

document.body.style.setProperty('--background-color', 'blue');
body {
  --background-color: red;
  background-color: var(--background-color);
}
12
Oriol

Die native Lösung

Die Standardmethoden zum Abrufen/Setzen von CSS3-Variablen lauten .setProperty() und .getPropertyValue().

Wenn Ihre Variablen Globals sind (in :root deklariert), können Sie die folgenden Werte verwenden, um deren Werte abzurufen und festzulegen.

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');

Der Getter gibt jedoch nur den Wert eines var zurück, wenn er mit .setProperty() gesetzt wurde. Wurde durch die CSS-Deklaration festgelegt, wird undefined zurückgegeben. Überprüfen Sie es in diesem Beispiel:

let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));
:root{ --myVariable : red; }
div{ background-color: var(--myVariable); }
  <div>Red background set by --myVariable</div>

Um dieses unerwartete Verhalten zu vermeiden, müssen Sie die getComputedStyle()method verwenden, bevor Sie .getPropertyValue()..__ aufrufen. Der Getter sieht dann so aus:

getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');

Meiner Meinung nach sollte der Zugriff auf CSS-Variablen einfacher, schneller, intuitiver und natürlicher sein ...

Mein persönlicher Ansatz

Ich habe CSSGlobalVariablesa einen winzigen (<3kb) Javascript-Helfer implementiert, der automatisch alle aktiven globalen CSS-Variablen in einem Dokument erkennt und in ein Objekt packt, für einfacheren Zugriff und Manipulation.

// set a new value to --myVariable
cssVar.myVariable = 'red';
// get the value of --myVariable
console.log( cssVar.myVariable );

Jede Änderung, die an den Objekteigenschaften vorgenommen wird, wird automatisch in die CSS-Variablen übersetzt. 

Verfügbar in: https://github.com/colxi/css-global-variables

7
colxi

Sie könnten etwas hinzufügen (ohne Klassenvariablen zu verwenden)

function loadTheme() {
  var htmlTag = document.getElementById("myDiv");
  var yourSelect = document.getElementById("themeSelect");
  var selectedTheme = (yourSelect.options[yourSelect.selectedIndex].value);
  console.log("selected theme: " + selectedTheme);

  // reset class names
  htmlTag.className = '';
  // add selected theme
  htmlTag.className = 'theme' + selectedTheme;
}
.theme1 {
  color: blue;
}
.theme2 {
  color: red;
}
<div id="myDiv">
  test
</div>
<select id="themeSelect" onChange="loadTheme()">
  <option value="1">Theme 1</option>
  <option value="2">Theme 2</option>
</select>

1
ochi

Es ist wahrscheinlich einfacher, Klassen in Ihrem CSS zu definieren, die die verschiedenen Designstile (.theme1 {...}, .theme2 {...} usw.) enthalten, und dann die Klasse mit JS basierend auf dem ausgewählten Wert zu ändern.

0
johnniebenson