Updateまたは（insertRuleからCSSルールを削除）JS

Question

で私は次のように（用を含む）のルールが挿入されている：

document.styleSheets[0].insertRule(`#li${i}:after {content: "${data[2][i]}"; }`, 0); 

どのように私はそれを更新または削除できますか？

なぜですか？ ：私は、forループを新しいデータで2回目の自分のを実行する場合、それはホバー の内容は更新されませんので （私はここでそれを必要とする：https://vengeur69.github.io/public/Wikipedia_api/）

例：

I get data with the term "yes"

I get data with the term "no" but the content didn't change

あなたは

Answer 1

削除するには、単にルールが挿入されたことを指標に渡しdeleteRule()を使用してありがとうインデックスでcssRulesリストはルールがで挿入されたルールへのアクセスを更新し、スタイルプロパティ

document.styleSheets[0].cssRules[index].style.content = ""; 

を変更するために

var index = document.styleSheets[0].insertRule(`#li${i}:after {content: "${data[2][i]}"; }`, 0); 
document.styleSheets[0].deleteRule(index); 

であなたがあれば、ルールにアクセスすることはできません注意してくださいアクセスされているスタイルシートは外部にリンクされていたため、cssRulesはnullになります。そのスタイルを変更するには、それを削除して戻す必要があります。

デモ

var stylesheet = document.styleSheets[0]; 
 
var ruleIndex = 0; 
 

 
function redRule(){ 
 
    stylesheet.cssRules[ruleIndex].style.color = "red"; 
 
} 
 

 
function blueRule(){ 
 
    stylesheet.cssRules[ruleIndex].style.color = "blue"; 
 
} 
 

 
function replaceRule(){ 
 
    stylesheet.deleteRule(ruleIndex); 
 
    ruleIndex = stylesheet.insertRule("body { color:yellow; }",0);  
 
} 
 

 
ruleIndex = stylesheet.insertRule("body { color:black; }",0); 
 

 
document.addEventListener('click',function(e){ 
 
switch(e.target.id){ 
 
    case 'red': 
 
    redRule(); 
 
    break; 
 
    case 'blue': 
 
    blueRule(); 
 
    break; 
 
    case 'replace': 
 
    replaceRule(); 
 
    break; 
 
} 
 
});

<style></style> 
 
Text<br> 
 
<button id="red">Change rule to red</button><br> 
 
<button id="blue">Change rule to blue</button><br> 
 
<button id="replace">Replace rule</button><br>