0

After reading jQuery's CSS documentation, it doesn't look like it offers any advantages over just getting the Javascript element directly and manipulating its CSS by updating the property. Am I missing something?

4

5 回答 5

4

你应该使用 jQuerycss方法，它提供了很多好处：

  • 您可以在单个.css调用中设置多个 css 属性。
  • 您可以传递整数值，它会自动转换为 px。
  • 它规范了许多跨浏览器问题。例如，我可以直接使用.css('opacity', 0.8)而无需测试用户是否使用 IE 并应用丑陋的 alpha 变通方法。
  • 我发现$('#foo').css('prop', 'value')比
    $('#foo')[0].style.prop = 'value';

更不用说.css提供其他 jQuery 的功能了，例如链接方法和自动迭代元素数组。

于 2012-06-25T03:33:42.697 回答
2

jQuery 使 DOM 查找更容易，我喜欢 jQuery 中的 CSS 函数，因为我不需要记住附加函数的名称来操作样式。我可以将 .css() 与标准 CSS 属性和值结合使用。

于 2012-06-25T03:25:14.747 回答
1

与基本 JS 实现相比，有很多好处，以下是我的最爱：

  • 使用选择器 $('a').css(....) 它将将该 CSS 应用于所有匹配“a”的选择器。您将不得不使用循环，否则会创建更多代码
  • 可以传入一个对象 {} 并以这种方式添加样式
  • 可以执行一个函数来计算值（就像上面提到的循环一样）。

在我看来，所有这些都会导致代码更简洁、更简洁。

于 2012-06-25T03:27:53.553 回答
1

一个优点可能是将您设置的样式与设置它们的行为分开。例如，也许您在其他地方的 JavaScript 代码中动态构建样式。这将允许您调整该逻辑，而无需调整应用样式的代码。

或者，也许您想制作一个“可配置”脚本并将所有样式放入标题变量中，以分隔成一个可配置选项部分。（编写您自己的 jQuery 插件通常会涉及到这一点。）您可以将应用样式的代码隐藏在文件的“不要在此行以下修改”部分中，将可设置的属性留给人们可以配置它们的地方。

于 2012-06-25T03:28:41.113 回答
1

jQuery$.fn.css真的什么都没做。我的意思是，这是源函数本身：

css: function( elem, name, extra ) {
    var ret, hooks;

    // Make sure that we're working with the right name
    name = jQuery.camelCase( name );
    hooks = jQuery.cssHooks[ name ];
    name = jQuery.cssProps[ name ] || name;

    // cssFloat needs a special treatment
    if ( name === "cssFloat" ) {
        name = "float";
    }

    // If a hook was provided get the computed value from there
    if ( hooks && "get" in hooks && (ret = hooks.get( elem, true, extra )) !== undefined ) {
        return ret;

    // Otherwise, if a way to get the computed value exists, use that
    } else if ( curCSS ) {
        return curCSS( elem, name );
    }
}

哦，我想当我说“不做任何事情”时，我的意思是它规范化名称以便您可以使用hyphen-notation而不是camelCase，支持跨浏览器兼容性并在返回适当的值之前opacity规范化属性名称。float

我想我也掩盖了这只是函数的访问器版本，mutator方法是：

style: function( elem, name, value, extra ) {
    // Don't set styles on text and comment nodes
    if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
        return;
    }

    // Make sure that we're working with the right name
    var ret, type, origName = jQuery.camelCase( name ),
        style = elem.style, hooks = jQuery.cssHooks[ origName ];

    name = jQuery.cssProps[ origName ] || origName;

    // Check if we're setting a value
    if ( value !== undefined ) {
        type = typeof value;

        // convert relative number strings (+= or -=) to relative numbers. #7345
        if ( type === "string" && (ret = rrelNum.exec( value )) ) {
            value = ( +( ret[1] + 1) * +ret[2] ) + parseFloat( jQuery.css( elem, name ) );
            // Fixes bug #9237
            type = "number";
        }

        // Make sure that NaN and null values aren't set. See: #7116
        if ( value == null || type === "number" && isNaN( value ) ) {
            return;
        }

        // If a number was passed in, add 'px' to the (except for certain CSS properties)
        if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
            value += "px";
        }

        // If a hook was provided, use that value, otherwise just set the specified value
        if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value )) !== undefined ) {
            // Wrapped to prevent IE from throwing errors when 'invalid' values are provided
            // Fixes bug #5509
            try {
                style[ name ] = value;
            } catch(e) {}
        }

    } else {
        // If a hook was provided get the non-computed value from there
        if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
            return ret;
        }

        // Otherwise just get the value from the style object
        return style[ name ];
    }
}

因此，总而言之，优点是您在尝试动态设置 HTML 元素样式时不必担心跨浏览器问题，因为专门的 jQuery 开发人员已经将所有内容很好地规范化为一个函数。

来自jQuery 版本 1.7.2的代码

于 2012-06-25T03:40:57.233 回答