我们可以使用 JQuery 或 Javascript 创建 CSS 选择器规则吗？答案

【问题标题】：Can we Create CSS Selector rule with JQuery or Javascript?我们可以使用 JQuery 或 Javascript 创建 CSS 选择器规则吗？
【发布时间】：2016-07-20 15:58:03
【问题描述】：

我们可以用

创建样式或任何其他标签

var st = document.createElement("style");

甚至将其附加到正文

body.append(st);

它会创建

<body><style></style></body>

我想知道我们是否可以使用 javascript 将样式放在样式标签中，而不是简单的规则，我知道有 $("selector").css() 函数可以将 css 规则应用于选择器，但我想要一点更强大的规则，我想添加我刚刚创建的样式标签，

类似这样的：

<style>
    div.bar {
        text-align: center;
        color: red;
    }
</style>

st.innerHtml 或 st.innerText 不允许我设置这些值。

注意：这只是要求我在浏览器控制台中执行的操作。

【问题讨论】：

为什么不添加指定样式的类？
@guradio 通常我也会这样做，但在一次采访中有人要求我这样做。面试官坚持只这样做

标签： javascript jquery html css

【解决方案1】：

您可以简单地使用 jquery .text 方法，如

const cssCode = `div.bar {
    text-align: center;
    color: red;
}`
$('style-tag-selector').text(cssCode)

但在我看来，无论您的目标是什么 - 这个解决方案都不好。你不应该通过 JavaScript 搞乱 CSS。

最好的方法是在单独加载的 .css 文件中添加样式，然后您可以使用 javascript 将类切换为元素。

【讨论】：

其实面试的时候问我的，我一般不会这样，谢谢你的回答有效

【解决方案2】：

您可以直接在样式标签中添加您的 css 并将它们附加到页面的头部：

$( "head" ).append( "<style>div.bar {text-align: center; color: red}</style>" );

您可以将多个样式标签与 css 附加在彼此下方的头部，这样您可以覆盖以前的样式，但这不是最佳做法。

我更喜欢将您的样式放在单独的文件中，并管理这些文件是否包含在您的代码中。

【讨论】：

【解决方案3】：

实际上有一个接口。例如，添加一个样式元素并为其添加一个规则（这将导致类 should-be-red 的任何内容变为红色。

var styleElement = document.createElement('style');
document.head.appendChild(styleElement);
var sheet = styleElement.sheet;
sheet.insertRule('.should-be-red { color: red; }', 0);

您可以迭代规则并插入/删除规则以及类似的令人兴奋的事情。

jsbin：https://jsbin.com/jodiro/1/edit?html,js,output

【讨论】：