如何使用jQuery更改CSS类规则？
如何使用jQuery更改CSS类规则？
提问于 2018-03-02 00:27:03
我有两个问题。
- 我想要做的是使用jQuery即时更改css类规则。
.classname {颜色：红; 字体大小：14px的;}
在上面的例子中，我有一个名为
.classname的类，我想改变字体大小只有在.classname不通过添加CSS内联的颜色。 - 我想创建并保存
.classname更改到一个文件中，记住将会有完整的样式表或没有将保存在文件中的类名。
我怎样才能做到这一点？
回答 2
Stack Overflow用户
发布于 2018-03-02 08:42:00
据我所知，没有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声明，并使用cssTextCssRule对象的属性来构建一个字符串，该字符串最终将被发送到使用Ajax POST请求。服务器端是你的业务。
Stack Overflow用户
发布于 2018-03-02 10:10:46
最近，我需要修复AutoComplete小部件的一些jQuery主题问题。我想更改自动完成部件的背景色。
我查找了CSS，发现自动完成类的定义如下
.ui-autocomplete { position: absolute; cursor: default; } 因此，在我的程序中，我发出以下语句，通过添加背景属性来更改类。注意，我保留了其他属性，否则它将破坏现有的功能。
$("<style type='text/css'> .ui-autocomplete { position: absolute; cursor: default; background:black; color:white} </style>").appendTo("head");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007480
复制相关文章
相似问题