首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我们可以用JQuery或Javascript创建CSS选择器规则吗?

我们可以用JQuery或Javascript创建CSS选择器规则吗?
EN

Stack Overflow用户
提问于 2016-07-20 05:58:25
回答 3查看 75关注 0票数 1

我们可以创建样式或任何其他标记

代码语言:javascript
复制
var st = document.createElement("style");

甚至把同样的东西附加到身体上

代码语言:javascript
复制
body.append(st);

它会创造出

代码语言:javascript
复制
<body><style></style></body>

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

就像这样:

代码语言:javascript
复制
<style>
    div.bar {
        text-align: center;
        color: red;
    }
</style>

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

注意:这是让我只在浏览器控制台做的.

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-07-20 06:01:20

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

代码语言:javascript
复制
const cssCode = `div.bar {
    text-align: center;
    color: red;
}`
$('style-tag-selector').text(cssCode)

但在我看来,不管你的目标是-这个解决方案是不好的。您不应该通过JavaScript来处理CSS。

最好的方法是在单独加载的.css文件中包含样式,然后可以将类切换到带有javascript的元素。

票数 2
EN

Stack Overflow用户

发布于 2016-07-20 06:05:25

您可以将css直接添加到样式标记中,并将它们附加到页面的头部:

代码语言:javascript
复制
$( "head" ).append( "<style>div.bar {text-align: center; color: red}</style>" );

您可以添加多个样式标记,并将css放在彼此的头部下面,这样您就可以覆盖以前的syles,但这不是最佳实践。

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

票数 2
EN

Stack Overflow用户

发布于 2016-07-20 07:58:03

实际上,这里有一个接口。例如,添加一个样式元素并向其添加一个规则(这将导致类should-be-red出现红色的任何内容。

代码语言:javascript
复制
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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38473348

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档