jquery - 如何使用 jQuery 更改 css 类规则?

标签 jquery css

谁能帮帮我,我的问题有两个部分。

  1. 我想做的是使用 jQuery 即时更改 css 类规则。

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

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

  2. 我想创建并保存 .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 请求发送到服务器的字符串。服务器端是您的事。

引用资料:

希望对你有帮助

关于jquery - 如何使用 jQuery 更改 css 类规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/622122/

相关文章:

javascript - 将送货地址字段复制到账单地址字段

javascript - 在页面中找到一串文本并在其周围包裹一些 span 标签

css图像背景定位

javascript - 试图覆盖 CSS...但它在 PHP iframe 中?

javascript - 在jquery中向上滚动时如何使类消失

javascript - jquery datepicker 允许输入或选择特定文本

javascript - 禁用使用 jquery 将 HTML 元素添加到 DIV

html - 使用 simple-line-icons 符号作为占位符

css - 如何在 div 标签上添加带边框的三 Angular 形

javascript - 如何避免 Angular 中的元素重叠