使用jQuery更新CSS属性

Updating a CSS attribute using jQuery

本文关键字：属性 CSS 更新 jQuery 使用      更新时间：2023-09-26

假设我有以下html:

...
<div class="thinger">...</div>
<div class="thinger">...</div>
<div class="thinger">...</div>
...

我想动态设置所有thingerdiv的宽度。我知道我可以这样做：

$(".thinger").css("width",someWidth);

这将产生如下的html：

<div class="thinger" style="width: 50px;">...</div>
<div class="thinger" style="width: 50px;">...</div>
<div class="thinger" style="width: 50px;">...</div>

我更喜欢得到这样的HTML：

...
<style>
    .thinger {
        width: 50px;
    }
</style>
...
<div class="thinger">...</div>
<div class="thinger">...</div>
<div class="thinger">...</div>
...

我环顾四周，但没有看到用于添加/更新/修改现有css类的jQuery实用程序。这存在吗？

我知道我可以使用这样的东西手动添加它：

var styleElement = document.createElement('style');
styleElement.type = "text/css";
styleElement.innerHTML = ".thinger {width:" + maxWidth + ";}";
document.getElementsByTagName('head')[0].appendChild(styleElement);

但我不想处理浏览器不一致的问题，我想确保我以"jQuery的方式"做事。有理由选择一种方法而不是另一种方法吗？

您可以创建style元素并将其附加到head，就像在DOM中创建任何其他元素一样，但这是浪费时间。

最好的方法是在样式表中设置类规则，并将类添加到这些元素中。这样可以更好地分离关注点，这对以后的代码重用和维护都是有益的

我无法在样式表中设置类规则，因为我不知道运行时之前的宽度是多少。

在这种情况下，使用css()的当前方法是可用的最佳方法。

这是一个完整的过程，请阅读使用JavaScript 将规则添加到样式表

有趣的问题是，最好测试一下使用一种方法是否比使用另一种方法有任何性能优势。

$("<style>.thinger{width:" + maxWidth + ";}</style>").appendTo("head");

如果您需要随着时间的推移更新该值，则不应一直在页面上附加新的样式标记。相反，你想用这样的东西更新现有的：

http://jsfiddle.net/daniellmb/0u5ffasq/

$('button').click(function(e) {
    // get the dynamic width setting
    var maxWidth = $(e.target).text(),
        newRule = '.thinger{width:' + maxWidth + ';}';
        styleTag = $('#thinger-style');
    if (styleTag.length) {
        // update existing
        styleTag.text(newRule);
    } else {
        // create for the first time
        $('<style id="thinger-style">' + newRule + '</style>').appendTo("head");
    }
});

是的。您可以使用jQuery .addClass()和.removeClass()方法添加或删除类。

$('#myDiv').addClass('myFirstClass');

或

$('#myDiv').removeClass('myFirstClass');

您还可以使用.css()方法更新元素的css，如：

$('.myFirstClass').css('width','100px');
相关文章：