Je veux créer une classe CSS lors de l'exécution en utilisant JavaScript et écrire dans un fichier CSS personnalisé.

Maintenant, j'ai écrit le code (voir ci-dessous) et créé ma classe mais je ne sais pas comment le créer dans mon fichier CSS.

var sheet = document.createElement('style')
    sheet.innerHTML = ".context-menu-icon-case1:before{content: url(progressbar.png);}";
    document.body.appendChild(sheet);

Il crée la classe CSS dans ma page actuelle mais je veux la créer dans un fichier css personnalisé.

-1
Motion 7 août 2016 à 08:04

3 réponses

Meilleure réponse

Vous pouvez demander le fichier .css existant à l'aide de XMLHttpRequest() ou fetch() au lieu de charger le fichier à html, ajoutez la nouvelle règle de style au fichier .css à { {X5}} ou response.text(), ou en utilisant FileReader.

Créez un objet Blob ou File, ou une représentation textuelle codée du nouveau texte css ajouté au fichier existant, créez un élément <link> avec l'attribut rel défini sur { {X5}}, href attribut à un objectURL, data URI ou texte codé du fichier créé, ajoutez l'élément link à document.head.

<head>
  <script>
    var cssupdate = `.context-menu-icon-case1:before {
                       content: url(progressbar.png);
                    }`;
    var cssfile = "style.css";
    fetch(cssfile)
    .then(response => response.text())
    .then(currentcss => {
      var css = currentcss + "\n" + `${cssupdate}`;
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.type = "text/css";
      link.href = "data:text/css," + encodeURIComponent(css); 
      document.querySelector("head").appendChild(link);
    });
  </script>
</head>

Plnkr http://plnkr.co/edit/Gh0qR4CcQPROXCldX9OC?p=preview

2
guest271314 7 août 2016 à 06:40

Vous pouvez simplement écrire une classe css dans un fichier css, puis appliquer la classe css à l'exécution par javascript, comme ceci:

html file:
<div id="test"></div>

css file:
.context-menu-icon-case1: {
  color: xxx,
  width: xxx
}

javascript file:
var ele = document.getElementById("test");
ele.className += "context-menu-icon-case1";
-1
Veetase 7 août 2016 à 06:49

Tu ne peux pas. Je suis désolé. La bonne nouvelle, c'est que vous n'en avez pas besoin. L'insertion de CSS via Javascript revient à lire à partir d'un fichier CSS.

2
user5116395user5116395 7 août 2016 à 05:09