谁能帮帮我,我的问题有两个部分。
我想做的是使用 jQuery 即时更改 css 类规则。
.classname{color:red; font-size:14px;}
在上面的示例中,我有一个名为
.classname
的类,现在使用 jQuery 我只想更改字体大小而不是.classname
中的颜色,而不是通过添加内联 css。我想创建并保存
.classname
更改到一个文件中,记住将有完整的样式表或没有类名将保存在文件中。
我怎样才能以最简单和更好的方式做到这一点?
谢谢!
最佳答案
据我所知,没有 jQuery 方法可以做到这一点。可能有一些用于此的 jQuery 插件,但我不知道。
基本上,使用 document
对象的 styleSheets
属性可以实现您在第一个问题中尝试实现的目标。它比这稍微复杂一点,因为您需要走到一个相当深的对象链,但仍然适用于所有主流浏览器,包括 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 请求发送到服务器的字符串。服务器端是您的事。
引用资料:
- document.styleSheets (Mozilla)
- styleSheet object (Mozilla)
- CssRule object (Mozilla)
- document.styleSheets (MSDN)
- CssRule object (MSDN)
希望对你有帮助
关于jquery - 如何使用 jQuery 更改 css 类规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/622122/