Question

我正在尝试挂钩css get / set。但是在安装一个简单的pass thru hook之后，似乎没有调用:( Chrome控制台中没有错误消息）

    $.cssHooks['padding-left'] = {
        get: function( elem, computed, extra ) {
            return $.css( elem, $['padding-left'] );
        },
        set: function( elem, value) {
            // Setting breakpoint here in Chrome, this line is not called:
            elem.style[ $.support['padding-left'] ] = value;
        }
    };
    // Proof of concept: Should not this statement initiate the hooked setter call?
    // This statement is called, confirmed via breakpoint
    $('#et-top-navigation').css('padding-left', '0px');

我错过了什么？

Answer 1

使用camel-case javascript属性名称而不是带连字符的css样式。

$.cssHooks['paddingLeft'] = { ...

Answer 2

你需要在文档就绪调用中包装所有这些，因为jQuery此时会写cssHooks并且如果存在则会删除你的函数。

查看API中的骨架模板 https://api.jquery.com/jQuery.cssHooks/

(function( $ ) {

    // First, check to see if cssHooks are supported
    if ( !$.cssHooks ) {
      // If not, output an error message
      throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
    }

    // Wrap in a document ready call, because jQuery writes
    // cssHooks at this time and will blow away your functions
    // if they exist.
    $(function () {
      $.cssHooks[ "someCSSProp" ] = {
        get: function( elem, computed, extra ) {
          // Handle getting the CSS property
        },
        set: function( elem, value ) {
          // Handle setting the CSS value
        }
      };
    });

})( jQuery );

没有调用jQuery cssHooks

2 个答案: