Javascript 如何在样式标记中使用/传递脚本标记变量

我正在为我的自动化E2E套件创建一个报告工具，到目前为止，我的大部分工作都很顺利。我现在有点纠结于如何传递和/或使用在脚本标记中创建的变量来更改样式标记的值

    '<style>' +
       '@keyframes passed {' +
         'to {' +
       'stroke-dashoffset: passedCircle;' +
         '}' +
       '}' +
    '</style>';

因此，基本上，我报告的这一部分将为测试结果创建一些度量（总测试、总通过、跳过和失败），然后创建一个圆圈，该圆圈应根据结果的度量进行相应调整（例如，10个总测试，其中5个通过的结果在通过的圆圈中为半圆，代表50%）

下面是它目前在代码中的表现：

    '<script type="text/javascript">' +
        'document.getElementById("titleHeader").textContent = "' + title + '";' +
        'var passed = document.querySelectorAll("li.passed").length;' +
        'var failed = document.querySelectorAll("li.failed").length;' +
        'var skipped = document.querySelectorAll("li.pending").length;' +
        'var total = passed + failed + skipped;' +
        'document.querySelector("div.item.passed h2").textContent = passed;' +
        'document.querySelector("div.item.failed h2").textContent = failed;' +
        'document.querySelector("div.item.skipped h2").textContent = skipped;' +
        'document.querySelector("h2.totalTestAmount").textContent = total;' +
        'var passedCircle = (440-((passed/total)*440));' +
        'var failedCircle = (440-((failed/total)*440));' +
        'var skippedCircle = (440-((skipped/total)*440));' +
    '</script>' +

“”+
'document.getElementById（“titleHeader”）.textContent=“”+title+”；'+
'var passed=document.queryselectoral（“li.passed”）.length；'+
'var failed=document.querySelectorAll（“li.failed”）.length；'+
'var skipped=document.querySelectorAll（“li.pending”）.length；'+
'var total=通过+失败+跳过；'+
'document.querySelector（“div.item.passed h2”）.textContent=passed；'+
'document.querySelector（“div.item.failed h2”）.textContent=failed；'+
'document.querySelector（“div.item.skipped h2”）.textContent=skipped；'+
'document.querySelector（“h2.totalTestAmount”）.textContent=total；'+
'var passedCircle=（440-（（通过/总计）*440））；'+
'var failedCircle=（440-（（失败/总数）*440））；'+
'var skippedCircle=（440-（（跳过/总计）*440））；'+
'' +

在脚本末尾创建的三个变量将产生由短划线偏移属性表示的值，我希望在样式标记中传递给该属性

    '<style>' +
       '@keyframes passed {' +
         'to {' +
       'stroke-dashoffset: passedCircle;' +
         '}' +
       '}' +
    '</style>';

“”+
“@关键帧已通过{”+
“到{”+
'笔划dashoffset:passedCircle；'+
'}' +
'}' +
'';

我曾尝试在脚本标记中通过

window.passedCircle

执行全局类型，但这也不起作用

---

我很好奇是否有一种方法可以在页面完全编写和加载之后进行这种类型的修改。

我不知道您想做什么，但您能检查

样式表.insertRule（规则，索引）

是否适合您吗？它允许您通过Javascript向样式中插入规则。感谢您的回复。我最终找到了一种适合我的方法，使用了类似于你建议的东西。我不熟悉css/javascript，所以经过一些研究后，我能够利用样式表属性并找到覆盖和传递变量所需的适当规则。我不知道您想做什么，但您能检查

样式表.insertRule（规则，索引）

是否适合您吗？它允许您通过Javascript向样式中插入规则。感谢您的回复。我最终找到了一种适合我的方法，使用了类似于你建议的东西。我不熟悉css/javascript，所以经过一些研究，我能够利用样式表属性，找到覆盖和传递变量所需的适当规则。