我怎样才能改变使用jQuery的CSS类规则？
任何人都可以帮助我，我有两个部分我的问题。
-
我想要做的是使用jQuery即时更改css类规则。
.classname {颜色：红; 字体大小：14px的;}在上面的例子中，我有一个类名为
.classname现在使用jQuery我想更改字体大小只有在.classname不是颜色，而不是通过添加内联的CSS。 -
我想创build并保存
.classname更改为一个文件记住将有完整的样式表或没有将保存在文件中的类名。
我怎样才能做到这一点最简单和更好的方式？
谢谢！
据我所知，没有jQuery的方式来做到这一点。 可能有一些jQuery插件，但我不知道。
基本上，你试图在第一个问题中实现的是使用document对象的styleSheets属性。 这比复杂一点，你需要走到一个相当深的对象链，但仍然适用于包括Internet Explorer 6在内的所有主stream浏览器。下面是一个概念certificate。 CSS在STYLE标签内，但是也可以和外部CSS一起工作。 我会让你做抽象的。
概念validation
<!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>
对于第二个问题，我没有时间写一个解决scheme，但它会涉及到读取CSS声明，如上所述，并使用CssRule对象的cssText属性，以build立一个string，最终将被发送到服务器一个Ajax POST请求。 服务器端是你的业务。
参考文献：
- document.styleSheets（Mozilla）
- styleSheet对象（Mozilla）
- CssRule对象（Mozilla）
- document.styleSheets（MSDN）
- CssRule对象（MSDN）
希望它有帮助
最近，我需要修复一些jQuery自动填充小部件的主题问题。 我想改变自动填充小部件的背景颜色。
所以我查了CSS，发现自动完成类是这样定义的
.ui-autocomplete { position: absolute; cursor: default; }
所以在我的程序中，我发出以下语句，通过添加背景属性来更改类。 请注意，我保留其他属性，否则将破坏现有的function
$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");
只有在以下情况下您才应该采取
- 您需要将值设置为某些不切实际的东西（例如，以像素为单位的变化宽度）
- 而且您希望将此样式应用于未来将插入到DOM中的元素
有一个jQuery插件可以做到这一点： http : //plugins.jquery.com/project/jquerycssrule
对于我工作的一个小项目，我提取了最基本的要素，并创build了以下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); } }
如果我正确理解你的问题，你想阅读一个CSS文件，对一个类进行更改，然后通过保存文件来保存这些更改？
你不能用从客户端运行的JavaScript / jQuery来做到这一点; 你当然可以改变DOM中匹配CSS类 .classname 的每个元素的字体大小 ，就像这样
$('.classname').css('font-size','14px');
但是客户端的JavaScript不能从Web浏览器访问文件系统，所以你需要一些其他方式（即服务器端代码）来更改CSS文件本身。
你也可以尝试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();
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个接口：
- 的CSSStyleSheet
- 样式表
这使得可以激活/取消样式表，删除规则，添加规则等等… MDM中的所有细节： Using_dynamic_styling_information
你要做的是通过在服务器上有几个主题（theme1.css，theme2.css，theme3.css等）来完成，并让用户select他喜欢的主题。 然后，您可以使用用户configuration文件保存数据库中用户select的主题（theme2.css）。 当用户显示他的页面时，在页面顶部包含theme2.css而不是主题default.css。
这可以很好地与服务器端技术，如PHP或ASP.NET或任何你喜欢的。 当然，你可能会使用javascript来保存用户计算机上的cookie ，以记住他的select，并再次使用JavaScript来包含通过cookie记住的文件 。
如果你想让用户精确地pipe理devise的特定元素（例如标题的颜色，字体等），那么你可以再次使用服务器端技术（在这种情况下，我认为更好）或JavaScript保存的东西，如标题=蓝色，字体= Arial和使用jQuery应用存储到您的网页。
希望它给你一个概述。
在一个半相关的说明，也看到我的答案有关更改LESSvariables，这将导致更新的CSS规则。 根据你的情况，可能会更有用，因为单个LESSvariables可以驱动大量的CSS规则…. https://stackoverflow.com/a/9491074/255961
不知道改变类的属性我来这里寻找一个答案，我自己似乎已经有几个答案了，至于保存你可以使用jQuery的$ .post方法发送一个包含变化或$。 url编码值然后使用PHP fwrite或file_put_contents写入新的css文件。 确保您在存储任何数据之前限制对此function的访问或确保值符合特定条件。
对于第一部分，我通常指定一个样式块，并使用jQuery打开/closures它。 例如：
<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);
由于应用于头部的样式彼此“重载”，所以将会使用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();
它也很好地分配一个类的样式元素来识别它
我很确定你不能改变现有风格的规则。 即使萤火虫也不会让你这样做。 您可以devise一个元素或一组元素，您可以分配和取消分配类，但我不认为您可以改变现有的类。 为了做你所要求的，你将需要维护某种联合数组，logging对现有类的build议更改，然后保存这些更改，您将需要上传到服务器，然后可以提供一个链接下载到客户端。
我使用jQuery的addClass： http : //api.jquery.com/addClass/ ，然后将类设置为我想要更改的属性。
