如何使用 jQuery 更改 css class 规则？

Question

任何人都可以帮助我，我的问题有两个部分。

我想要做的是使用 jQuery 即时更改 css class 规则。
```
  .classname{颜色：红色； 字体大小：14px;}
```
在上面的示例中，我有一个名为.classname的 class 现在使用 jQuery 我只想更改字体大小而不是使用.classname中的颜色，而不是通过添加 css 内联。
我想创建.classname更改并将其保存到文件中，记住将有完整的样式表或没有将保存在文件中的类名。

我怎样才能以最简单和更好的方式做到这一点？

谢谢！

Answer 1

据我所知，没有 jQuery 方法可以做到这一点。 可能有一些 jQuery 插件，但我不知道。

基本上，您在第一个问题中尝试实现的目标可以使用document object 的styleSheets属性来实现。 它比这要复杂一些，因为您需要走到一个相当深的 object 链，但仍然适用于包括 Internet Explorer 6 在内的所有主要浏览器。下面是一个概念证明。 CSS 位于 STYLE 标签内，但也可与外部 CSS 一起使用。 我会让你做抽象。

概念证明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
 color: red;
 font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("button").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "green";
                }
            }
        }
    };
}
</script>
</head>
<body>

<h1 class="classname">Some red text</h1>

<button id="button">Make text green</button>

</body>
</html>

对于您的第二个问题，我没有时间编写解决方案，但这将涉及阅读 CSS 声明，并使用 CssRule object 的cssText属性来构建一个字符串，该字符串最终将发送到服务器使用Ajax POST 请求。 服务器端是您的业务。

参考：

希望能帮助到你

Answer 2

最近我需要为自动完成小部件修复一些 jquery 主题问题。 我想更改自动完成小部件的背景颜色。

于是我查了一下 CSS 发现自动补全 class 是这样定义的

.ui-autocomplete { position: absolute; cursor: default; }

因此，在我的程序中，我发出以下语句，通过添加背景属性来更改 class。 请注意，我保留其他属性，否则会破坏现有功能

$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");

Answer 3

只有在以下情况下，您才应该采用这种方法：

您需要使用 class 名称将值设置为无法枚举的值（即以像素为单位的不同宽度）
并且您想将此样式应用于将来将插入 DOM 中的元素

有一个 jQuery 插件可以做到这一点： http://plugins.jquery.com/project/jquerycssrule

对于我从事的一个小项目，我提取了基本要素并创建了以下 function：

function addCSSRule(sel, prop, val) {
    for(var i = 0; i < document.styleSheets.length; i++){
        var ss    = document.styleSheets[i];
        var rules = (ss.cssRules || ss.rules);
        var lsel  = sel.toLowerCase();

        for(var i2 = 0, len = rules.length; i2 < len; i2++){
            if(rules[i2].selectorText && (rules[i2].selectorText.toLowerCase() == lsel)){
                if(val != null){
                    rules[i2].style[prop] = val;
                    return;
                }
                else{
                    if(ss.deleteRule){
                        ss.deleteRule(i2);
                    }
                    else if(ss.removeRule){
                        ss.removeRule(i2);
                    }
                    else{
                        rules[i2].style.cssText = '';
                    }
                }
            }
        }
    }

    var ss = document.styleSheets[0] || {};
    if(ss.insertRule) {
        var rules = (ss.cssRules || ss.rules);
        ss.insertRule(sel + '{ ' + prop + ':' + val + '; }', rules.length);
    }
    else if(ss.addRule){
        ss.addRule(sel, prop + ':' + val + ';', 0);
    }
}

Answer 4

如果我正确理解您的问题，您想通读 CSS 文件，对 class 进行更改，然后通过保存文件来保留这些更改？

你不能用从客户端运行的 JavaScript/jQuery 来做到这一点； 您当然可以更改与 CSS class .classname匹配的 DOM 中每个单独元素的字体大小，就像这样

$('.classname').css('font-size','14px');

但是客户端 JavaScript 无法从 web 浏览器访问文件系统，因此您需要一些其他方式（即服务器端代码）来更改 CSS 文件本身。

Answer 5

您也可以尝试 JSS，它对我来说非常有用：https://github.com/Box9/jss

下载 jss.js 并将其包含在您的 HTML 中：
 <script type="text/javascript" src="jss.js"></script>
添加新规则（或扩展现有规则）：
 jss('.special', { color: 'red', fontSize: '2em', padding: '10px' });
检索现有规则：
 jss('.special').get();
回报：
 { 'color': 'red', 'font-size': '2em', 'padding-bottom': '10px', 'padding-left': '10px', 'padding-right': '10px', 'padding-top': '10px' }
删除现有规则：
 jss('.special').remove();

Answer 6

DOM Level 2 允许直接操作样式表的 css 规则。 前任：

var ss = document.styleSheets[1];  // ref to the first stylesheet
ss.cssRules[0].style.backgroundColor="blue";  // modification of the 1rst rule

有2个接口：

CSS样式表
样式表

这使得激活/停用样式表、删除规则、添加规则等成为可能... MDM 中的所有详细信息： Using_dynamic_styling_information

Answer 7

What you are looking to do is done by having a couple of themes on the server (theme1.css, theme2.css, theme3.css, etc.) and letting the user select the theme he likes. 然后，您可以使用用户配置文件将用户选择的主题 (theme2.css) 保存在数据库中。 当用户然后显示他的页面时，您在页面顶部包含 theme2.css 而不是主题 default.css。

这适用于服务器端技术，例如 PHP 或 ASP.NET 或任何您喜欢的。 当然，您可能会使用 javascript 在用户计算机上保存一个cookie以记住他的选择，然后再次使用 javascript 来包含您通过 cookie 记住的文件。

如果您想让用户准确管理适用于设计特定元素的内容（例如 header 的颜色、字体等），您可以再次使用服务器端技术（我认为在这种情况下更好) 或 javascript 保存诸如 header=blue、font=Arial 之类的内容并使用jQuery应用存储到您页面的内容。

希望它能给你一个概述。

Answer 8

对于第一部分，我通常指定一个样式块并使用 jQuery 打开/关闭它。 例如：

<style type="text/css" id="my-style" media="all">
    .classname{color:red; font-size:14px;}
</style>

然后可以通过设置 disabled 属性来进行切换，如：

$('#my-style').prop('disabled', true);
$('#my-style').prop('disabled', false);

Answer 9

您可以使用 YUI 样式表实用程序。

http://yuilibrary.com/yui/docs/stylesheet/

它工作得很好！

Answer 10

由于 styles 彼此应用到头部“重载”，因此将使用所有相关元素的后期append()以及 styles，除非之前有!important涉及。

用于分配 css 内容的 function 应该是text()而不是html()以防止意外注入代码

var dynamic_css = function(class_name){
  return '.' + class_name + ' {color:red; font-size:14px;}';
}
var styles = $('<style type="text/css">');
styles.text(dynamic_css('my_classname'));
$('html head').append(styles);

之后：

styles.remove();

将 class 分配给 styles 元素以在以后识别它也很有效

Answer 11

在半相关的说明中，另请参阅我关于更改 LESS 变量的答案，这将导致更新的 CSS 规则。 根据您的情况，这可能更有用，因为单个 LESS 变量可以驱动许多 CSS 规则.... https://stackoverflow.com/a/9491074/255961

Answer 12

不确定是否要更改 class 属性我来这里寻找自己的答案，似乎已经有一些答案，至于保存，您可以使用 jquery $.post 方法发送包含更改或 $.get 的表单url 编码值，然后使用 PHP fwrite 或 file_put_contents 写入新的 css 文件。 在存储任何数据之前，请确保您限制对此功能的访问或确保值符合特定标准。

Answer 13

I used the addClass of jquery: http://api.jquery.com/addClass/ and then set the class as the attributes i want to change.

Answer 14

我很确定您不能更改现有样式中的规则。 即使萤火虫也不会让你这样做。 您可以设置一个元素或一组元素的样式，可以分配和取消分配类，但我认为您不能更改现有的类。 为了执行您所要求的操作，您需要维护某种关联数组来记录对现有类的建议更改，然后保存这些更改，您需要上传到服务器，然后服务器可以提供下载到客户端的链接.

如何使用 jQuery 更改 css class 规则？

问题描述

14 个解决方案

解决方案1
54 已采纳 2009-03-07 17:35:46

概念证明

解决方案2
17 2011-10-18 16:00:50

解决方案3
13 2009-12-01 16:58:12

解决方案4
12 2009-03-07 17:01:40

解决方案5
6 2012-07-14 19:11:21

解决方案6
2 2012-05-21 08:38:16

解决方案7
1 2009-03-07 18:19:55

解决方案8
0 2013-04-12 21:51:35

解决方案9
0 2014-11-06 08:00:05

解决方案10
0 2014-11-11 21:26:10

解决方案11
0 2012-03-04 23:41:46

解决方案12
0 2012-03-07 09:15:28

解决方案13
-1 2010-02-18 10:34:55

解决方案14
-1 2009-03-07 17:34:41

如何使用 jQuery 更改 css class 规则？

问题描述

14 个解决方案

解决方案1 54 已采纳 2009-03-07 17:35:46

概念证明

解决方案2 17 2011-10-18 16:00:50

解决方案3 13 2009-12-01 16:58:12

解决方案4 12 2009-03-07 17:01:40

解决方案5 6 2012-07-14 19:11:21

解决方案6 2 2012-05-21 08:38:16

解决方案7 1 2009-03-07 18:19:55

解决方案8 0 2013-04-12 21:51:35

解决方案9 0 2014-11-06 08:00:05

解决方案10 0 2014-11-11 21:26:10

解决方案11 0 2012-03-04 23:41:46

解决方案12 0 2012-03-07 09:15:28

解决方案13 -1 2010-02-18 10:34:55

解决方案14 -1 2009-03-07 17:34:41

解决方案1
54 已采纳 2009-03-07 17:35:46

解决方案2
17 2011-10-18 16:00:50

解决方案3
13 2009-12-01 16:58:12

解决方案4
12 2009-03-07 17:01:40

解决方案5
6 2012-07-14 19:11:21

解决方案6
2 2012-05-21 08:38:16

解决方案7
1 2009-03-07 18:19:55

解决方案8
0 2013-04-12 21:51:35

解决方案9
0 2014-11-06 08:00:05

解决方案10
0 2014-11-11 21:26:10

解决方案11
0 2012-03-04 23:41:46

解决方案12
0 2012-03-07 09:15:28

解决方案13
-1 2010-02-18 10:34:55

解决方案14
-1 2009-03-07 17:34:41