jQuery CSS 抽象

首先需要说明的是，您应该尽量使样式和 JavaScript 分开。如果要使用 JavaScript 更改元素的样式，请向元素添加（或删除）一个类名。然后在 CSS 中使用该类名作为挂钩来影响样式。

但是，有时您需要在 JavaScript 中应用样式。jQuery 恰好有一个函数可以做到这一点。

$("#thing").css("margin-right", 0);

它甚至可能有点吸引人，因为 jQuery 会为您处理一些跨浏览器问题。例如，不透明度就是那些需要 各种 CSS 属性 才能实现跨浏览器兼容性的属性之一。但是使用 jQuery，您无需应用所有这些属性。只需使用 CSS 函数设置不透明度即可。jQuery 知道它所在的浏览器环境，并将应用正确的属性。

// just works
// also alternate CSS syntax
$("#thing").css({
   opacity: 0.5
});

因此，您可能会将这种思路扩展到假设 jQuery 会帮助您解决其他需要多个 CSS 属性才能获得相同跨浏览器效果的问题，例如典型的 border-radius 示例。我们需要-moz-border-radius用于 Mozilla 浏览器，-webkit-border-radius 用于 WebKit 浏览器，以及border-radius用于 Opera（以及未来）。但 jQuery 在这里帮不上忙。

// not gonna help in current Firefox or Safari/Chrome
$("#thing").css({
   "border-radius": "20px"
});

要通过 jQuery 获得跨浏览器兼容的 CSS，我们仍然需要列出所有三个属性。

$("#thing").css({
   "border-radius": "20px",
   "-moz-border-radius": "20px",
   "-webkit-border-radius": "20px"
});

这是怎么回事？David Walsh 认为 在 jQuery 中包含此抽象会增加库的体积。 Ben Alman 认为 jQuery 应该处理完全支持的 CSS 属性（border-radius 规范尚未正式确定）。Screwlewse 认为 唯一支持不透明度的方式是因为动画需要它（像 fadeToggle 这样的核心函数）。

我不确定我的想法是否完全正确。一方面，如果这些问题能够自动处理，那确实会很不错。另一方面，我理解库体积过大和规范尚未最终确定这两个论点。

您怎么看？

如果您发现自己需要通过 jQuery 应用圆角，那么您可能需要将其抽象到您自己的一个小插件中。

$.fn.roundThis = function(radius) {
    return this.each(function(e) {
        $(this).css({
           "border-radius": radius,
           "-moz-border-radius": radius,
           "-webkit-border-radius": radius
        });  
    }); 
};

$(function() {

    // usage
    $("#thing-that-will-become-rounded").roundThis("20px");

});

但这仍然无法处理 IE，但有一些 很棒的插件可以做到。

---

其他新闻：恭喜 Brent Traut 赢得了我的小型竞赛中免费的 jQuery 大会 门票。有 10 人参加了竞赛，他们总共向开源项目捐赠了 115 美元。伪随机数生成 选出了获胜者。如果您还在考虑参加，那么您应该去！如果您还在考虑向开源项目捐款，那么您也应该这样做！