Question

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

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

我如何才能以最简单，最好的方式做到这一点？

谢谢！

Answer 1

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

基本上，您可以使用styleSheets对象的document属性在第一个问题中尝试实现的目标。它比你需要走到一个相当深的对象链更复杂，但仍适用于所有主流浏览器，包括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对象的cssText属性来构建一个字符串最终使用Ajax POST请求发送到服务器。服务器端是您的业务。

参考文献：

希望有所帮助

Answer 2

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

所以我查了一下CSS，发现自动完成类是这样定义的

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

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

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

Answer 3

只有在以下情况下才应采用此方法：

您需要将值设置为一些不切实际的东西枚举（即改变宽度）带有类名的像素
你想要的将此样式应用于元素将被插入到DOM中将来

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

对于我工作的一个小项目，我提取了基本要素并创建了以下功能：

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文件，对类进行更改，然后通过保存文件来保留这些更改吗？

使用从客户端运行的JavaScript / jQuery无法做到这一点;您当然可以 更改DOM中与CSS类匹配的每个元素的字体大小 .classname，就像这样

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

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

Answer 5

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

在HTML中下载并添加jss.js：

<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个接口：

这样就可以激活/停用样式表，删除规则，添加规则等... MDM中的所有详细信息：Using_dynamic_styling_information

Answer 7

您要做的是通过在服务器上设置几个主题（theme1.css，theme2.css，theme3.css等）并让用户选择他喜欢的主题来完成。然后，您可以使用用户配置文件保存用户选择的主题（theme2.css）。当用户显示他的页面时，您在页面顶部包含theme2.css而不是主题default.css。

这适用于服务器端技术，如PHP或ASP.NET或任何您喜欢的。当然，您可以使用javascript在用户计算机上保存cookie以记住他的选择，并再次使用javascript通过cookie记住include the file。

如果您想让用户使用服务器端技术（在这种情况下更好）再次管理适用于设计特定元素的内容（例如标题的颜色，字体等）在我看来）或javascript保存像header = blue，font = Arial和使用jQuery之类的东西应用存储到你页面的内容。

希望它能为您提供概述。

Answer 8

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

Answer 9

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

Answer 10

对于第一部分，我通常指定一个样式块并使用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 11

您可以使用YUI样式表工具。

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

它工作！

Answer 12

当应用于头部的样式'重载'时，将使用其所有相关元素的样式的迟append()，除非之前有!important。

用于分配css内容的函数应为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();

它也适用于为styles元素指定一个类以便稍后识别它

Answer 13

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

Answer 14

我使用了jquery的addClass：http://api.jquery.com/addClass/ 然后将类设置为我想要更改的属性。

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

14 个答案:

概念证明