web-dev-qa-db-fra.com

Accès à une propriété personnalisée CSS (ou variable CSS) via JavaScript

Comment obtenir et définir des propriétés personnalisées CSS (celles accessibles avec var(…) dans la feuille de style) en utilisant JavaScript (plain ou jQuery)?

Voici mon essai infructueux: cliquer sur les boutons change l'habituel font-weight, mais pas la propriété personnalisée --mycolor propriété:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <style>
    body { 
      --mycolor: yellow;
      background-color: var(--mycolor);
    }
  </style>
</head>
<body>

  <p>Let's try to make this text bold and the background red.</p>
  <button onclick="plain_js()">Plain JS</button>
  <button onclick="jQuery_()">jQuery</button>

  <script>
  function plain_js() { 
    document.body.style['font-weight'] = 'bold';
    document.body.style['--mycolor'] = 'red';
  };
  function jQuery_() {
    $('body').css('font-weight', 'bold');
    $('body').css('--mycolor', 'red');
  }
  </script>
</body>
</html>
javascriptjquerycsscss-variables
31
MarcZ

Vous pouvez utiliser document.body.style.setProperty('--name', value);:

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue);//set

Plus d'informations ici .

42
CMedina

La solution native

Les méthodes standard pour obtenir/définir des variables CSS3 sont .setProperty() et .getPropertyValue().

Si vos variables sont des globales (déclarées dans :root), Vous pouvez utiliser ce qui suit pour obtenir et définir leurs valeurs.

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

Cependant, le getter ne renverra que la valeur d'une variable, si elle a été définie, en utilisant .setProperty(). Si a été défini via la déclaration CSS, retournera undefined. Vérifiez-le dans cet exemple:

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>

Pour éviter ce comportement inattendu, vous devez utiliser la méthode getComputedStyle(), avant d'appeler .getPropertyValue(). Le getter ressemblera alors à ceci:

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

À mon avis, l'accès aux variables CSS devrait être plus simple, rapide, intuitif et naturel ...

Mon approche personnelle

J'ai implémenté CSSGlobalVariablesun minuscule (<3 Ko) assistant sorcier javascript détecte et emballe automatiquement dans un objet, toutes les variables globales CSS actives dans un document, pour un accès et une manipulation plus faciles .

// get the document CSS global vars
let cssVar = new CSSGlobalVariables();
// set a new value to --myVariable
cssVar.myVariable = 'red';
// get the value of --myVariable
console.log( cssVar.myVariable );

Toute modification appliquée aux propriétés de l'objet est automatiquement traduite dans les variables CSS.

Disponible en : https://github.com/colxi/css-global-variables

11
colxi

L'exemple suivant illustre comment modifier l'arrière-plan à l'aide de JavaScript ou de jQuery, en tirant parti des propriétés CSS personnalisées également appelées variables CSS (en savoir plus ici ). Bonus: le code indique également comment on peut utiliser une variable CSS pour changer la couleur de la police.

function plain_js() { 
    // need DOM to set --mycolor to a different color 
    d.body.style.setProperty('--mycolor', 'red');
     
    // get the CSS variable ...
    bodyStyles = window.getComputedStyle(document.body);
    fontcolor = bodyStyles.getPropertyValue('--font-color'); //get
 
    // ... reset body element to custom property's new value
    d.body.style.color = fontcolor;
    d.g("para").style["font-weight"] = "bold";
    this.style.display="none";
  };

  function jQuery_() {
    $("body").get(0).style.setProperty('--mycolor','#f3f');
    $("body").css("color",fontcolor);
    $("#para").css("fontWeight","bold");
    $(this).css("display","none");
  }
  
var bodyStyles = null;
var fontcolor = "";
var d = document;

d.g = d.getElementById;
d.g("red").addEventListener("click",plain_js);
d.g("pink").addEventListener("click",jQuery_);
:root {
     --font-color:white;
     --mycolor:yellow;
    }
    body { 
      background-color: var(--mycolor);
      color:#090;
    }
    
    #para {
     font: 90% Arial,Helvetica;
     font-weight:normal;
    }
    
    #red {
      background:red;
    }
    
    #pink {
      background:#f3f;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<p id="para">Let's try to make the background red or pink and change the text to white and bold.</p>
  <button id="red">Red</button>
  <button id="pink">Pink</button>

Notez qu'avec jQuery, afin de définir la propriété personnalisée sur une valeur différente, cette réponse contient réellement la réponse. Il utilise la méthode get () de l'élément body qui permet d'accéder à la structure DOM sous-jacente et renvoie l'élément body, facilitant ainsi le code définissant la propriété personnalisée --mycolor à une nouvelle valeur.

1
slevy1