任何人都可以帮助我,我有两个问题.

我想要做的是在运行中使用jQuery更改css类规则.

.classname{color:red; font-size:14px;}

在上面的示例中,我有一个名为.classnamenow 的类,现在使用jQuery我想更改字体大小而不是颜色,而.classname不是通过添加css内联.

我想创建并保存.classname对文件的更改,记住将有完整的样式表或没有将保存在文件中的类名.

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

谢谢!

1> Ionuț G. Sta..：

---

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

基本上,您在第一个问题中尝试实现的目标是使用对象的styleSheets属性document.它比你需要走到一个相当深的对象链更复杂,但仍适用于所有主流浏览器,包括Internet Explorer 6.以下是概念验证.CSS位于STYLE标记内,但也适用于外部CSS.我会让你做抽象.

概念证明

Some red text

Make text green

对于你的第二个问题,我没有时间编写解决方案,但它将涉及如上所述读取CSS声明并使用cssTextCssRule对象的属性来构建一个字符串,最终将使用一个字符串发送到服务器Ajax POST请求.服务器端是您的业务.

参考文献:

document.styleSheets(Mozilla)

styleSheet对象(Mozilla)

CssRule对象(Mozilla)

document.styleSheets(MSDN)

CssRule对象(MSDN)

希望能帮助到你

---

我上面的例子是由我链接到的文档页面构思的,我想我记得为什么我这样做了.我不仅仅是添加一条新规则,而是在现有声明中添加新规则.因此,我必须查找每个样式表才能找到该声明.现在,我现在能想出的最好的优化是以相反的顺序读取`styleSheets`,并在第一次遇到`selectorText`之后打破循环.这样,您只需修改一个样式表,即具有最高优先级的样式表.

2> Nilesh..：

---

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

所以我查了一下CSS,发现autocomplete类是这样定义的

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

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

$("").appendTo("head");

---

这个黑客让我咧嘴笑了.它从这里最高投票的答案中拯救了大量代码.我正在使用它.

3> Blago..：

---

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

您需要将值设置为使用类名枚举(即以像素为单位改变宽度)不切实际的值

并且您希望将此样式应用于将来插入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);
    }
}

4> Russ Cam..：

---

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

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

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

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

---

你不是在这里改变css类本身的字体大小,你要为每个匹配该类名的dom元素添加一个单独的font-size样式声明 - 这是一个重要的区别.如果在运行此jquery语句之后,您要构造类.classname的新dom元素并将其附加到文档,则它将不具有font-size属性.您需要重新运行jquery命令来设置新元素的font-size属性.

5> Vlad Sabev..：

---

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

在HTML中下载并包含jss.js:

添加新规则(或扩展现有规则):

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