Question

我们可以使用

创建样式或任何其他标记

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

甚至将其附加到身体

body.append(st);

它会创建

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

我想知道我们可以将风格标记用javascript以及简单的规则，我知道有$（＆＃34;选择器＆＃34;）。css（）函数可以将css规则应用于选择器但我想要一个更强大的规则，我想添加我刚创建的样式标签，

类似的东西：

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

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

注意：我只能在浏览器控制台中执行此操作。

Answer 1

你可以简单地使用像

这样的jquery .text方法

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

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

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

Answer 2

您可以直接在样式标记中添加css，并将其附加到页面的头部：

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

你可以将多个样式标签附加在头部的css中，这样你就可以覆盖以前的syles，但这不是最好的做法。

我更喜欢将您的样式放在单独的文件中，无论是否管理，文件都会包含在您的代码中。

Answer 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);

您可以迭代规则并插入/删除规则并激发类似的事情。

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/CSSStylesheet

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

我们可以使用JQuery或Javascript创建CSS Selector规则吗？

3 个答案: