简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Questions et réponses  >  le corps du texte

JavaScript permet d'accéder aux propriétés personnalisées CSS (également appelées variables CSS)

Comment obtenir et définir des propriétés personnalisées CSS (propriétés accessibles via var(…) dans une feuille de style) à l'aide de JavaScript (plain ou jQuery) ?

C'est ma tentative infructueuse : cliquer sur le bouton modifie les propriétés font-weight 属性，但不会更改自定义 --mycolor habituelles : 

<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>

P粉420868294P粉420868294385 Il y a quelques jours687

répondre à tous(2)je répondrai

  • P粉421119778

    P粉4211197782023-10-21 17:19:53

    Solution native

    La méthode standard pour obtenir/définir des variables CSS3 est .setProperty() 和 .getPropertyValue().

    Si vos variables sont des variables 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, si la valeur de var a été définie à l'aide de .setProperty(), le getter ne renverra que cette valeur. S'il est défini via une déclaration CSS, undefined sera renvoyé. Découvrez-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 appeler la méthode .getPropertyValue() 之前使用 getCompulatedStyle(). Le getter ressemblera alors à ceci : 

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

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

    Mon approche personnelle

    J'ai implémenté CSSGlobalVariables un petit assistant javascript (<3 Ko) qui détecte automatiquement tous les globaux CSS actifs dans un document et les regroupe dans un objet, <3kb) javascript 帮助程序，它自动检测文档中所有活动的 CSS 全局变量并将其打包到一个对象中， pour un accès et une manipulation plus faciles < /strong>.

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

    Toutes les modifications appliquées aux propriétés de l'objet sont automatiquement converties en variables CSS.

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

    répondre
    0
  • P粉863295057

    P粉8632950572023-10-21 14:23:27

    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

    répondre
    0
  • Annulerrépondre