javascript - Why use jQuery's css() function instead of maxHeight or the other named CSS functions?

Question

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?

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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的代码}