javascript - 样式表更新?

标签 javascript css

<分区>

想知道如何更新样式表。

这在我能够测试的任何地方都有效,但不确定它是否是最佳解决方案:

runDemo();

var css = document.getElementsByTagName("style")[0];
getRule(css.sheet.rules, "div").
    style.width = 80 / [4, 5, 7][parseInt(Math.random() * 3)] + "%";

function getRule(rules, selector) {
    for (var i in rules) {
        if (rules[i].selectorText == selector)
            return rules[i];
    }
    return null;
}

function runDemo() {
    for (var i = Math.random() * 10 + 5; i > 0; i--) {
        var d = document.createElement("div");
        d.innerText = parseInt(i + 1);
        document.body.appendChild(d);
    }
}
body {
    display: flex;
    flex-flow: row wrap;
}

div {
    margin: 10px;
    padding: 3;
    text-align: center;
    border: 1px solid blue;
}

最佳答案

我不建议以这种方式编辑样式规则。最好添加或删除整个样式表。这样可以更轻松地管理您的样式。

您可以在此处找到操作方法:Add stylesheet to Head using javascript in body

关于javascript - 样式表更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58235737/

上一篇:css - 尝试使用 CSS (flexbox) 垂直对齐文本

下一篇:javascript - 我怎样才能在 css-in-js Emotion 中通过自动生成的类名搜索代码?

相关文章:

javascript - 如何从url获取参数

javascript - 隐藏所有 div 并显示选中相同类别复选框的 div

css - 应用于 <a> 标签的 Bootstrap 按钮样式不会显示在导航栏中

javascript - 哪种预加载器是首选 - 基于图像、CSS 还是 JavaScript?

javascript - 在同一个 MVC 项目中的 C# 类和 JS 文件中使用相同的静态数据,而无需在运行时一次又一次地重建

javascript - 延续关系

css - 有没有办法计算(div 高度 - 相同的单位)?

css - jqGrid 中的行选择器列

javascript - JSON解析重复数据的问题?

javascript - Casperjs/Phantomjs - 在加载 google plus 主页时挂起