是否可以听“风格改变”事件?

2020/10/16 01:41 · javascript ·  · 0评论

是否可以在jQuery中创建可以绑定到任何样式更改的事件侦听器?例如,如果我想在元素更改尺寸或对style属性进行任何其他更改时“执行”操作,则可以执行以下操作:

$('div').bind('style', function() {
    console.log($(this).css('height'));
});

$('div').height(100); // yields '100'

这将非常有用。

有任何想法吗?

更新

很抱歉自己回答这个问题,但是我写了一个可能适合其他人的简洁解决方案:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

这将临时覆盖内部prototype.css方法,并在最后使用触发器重新定义它。所以它是这样的:

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

由于jQuery是开源的,因此我猜想您可以对css函数进行调整,使其在每次调用(传递jQuery对象)时调用您选择的函数。当然,您将需要搜索jQuery代码以确保其内部没有用于设置CSS属性的其他东西。理想情况下,您希望为jQuery编写一个单独的插件,以便它不会干扰jQuery库本身,但是您必须确定这对您的项目是否可行。

自从提出此问题以来,事情一直在发展-现在可以使用MutationObserver来检测元素的'style'属性中的更改,而无需jQuery:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

传递给回调函数的参数是MutationRecord对象,对象使您可以掌握新旧样式值。

在现代浏览器(包括IE 11+)中,支持很好

事件对象的声明必须在新的CSS函数中。否则,该事件只能触发一次。

(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var ev = new $.Event('style');
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

我认为最好的答案是,如果不是因为Mike的原因而无法启动您的活动,那么请问Mike。但是使用时会出现一些错误。因此,我写了一个新的答案来向您展示我使用的代码。

延期

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();

用法

// Add listener
$('element').on('stylechanged', function () {
    console.log('css changed');
});

// Perform change
$('element').css('background', 'red');

我收到错误消息,因为var ev = new $ .Event('style'); HtmlDiv中未定义样式之类的内容。我将其删除,然后启动$(this).trigger(“ stylechanged”)。另一个问题是Mike并未返回$(css,..)的结果,因此在某些情况下可能会出现问题。所以我得到结果并返回。现在可以使用了^^在每个CSS更改中,包括一些我无法修改和触发事件的库。

正如其他人所建议的那样,如果您可以控制更改元素样式的任何代码,则可以在更改元素高度时触发自定义事件:

$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');

否则,尽管会占用大量资源,但您可以设置一个计时器来定期检查元素高度的变化...

jQuery或Java脚本中没有对样式更改事件的内置支持。但是jQuery支持创建自定义事件并监听它,但是每次发生更改时,您都应该有一种自行触发它的方法。因此,这将不是一个完整的解决方案。

您可以尝试Jquery插件,它会在CSS更改且易于使用时触发事件

http://meetselva.github.io/#gist-section-attrchangeExtension
 $([selector]).attrchange({
  trackValues: true, 
  callback: function (e) {
    //console.log( '<p>Attribute <b>' + e.attributeName +'</b> changed from <b>' + e.oldValue +'</b> to <b>' + e.newValue +'</b></p>');
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});

有趣的问题。问题在于height()不接受回调,因此您将无法启动回调。使用animate()或css()设置高度,然后在回调中触发自定义事件。这是一个使用animate(),经过测试并可以工作(demo)作为概念证明的示例

$('#test').bind('style', function() {
    alert($(this).css('height'));
});

$('#test').animate({height: 100},function(){
$(this).trigger('style');
}); 

只需从上面添加@David解决方案并将其形式化:

请注意,jQuery函数是可链接的,并返回'this',以便可以一次调用另一个调用(例如$container.css("overflow", "hidden").css("outline", 0);)。

因此,改进后的代码应为:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        var ret = orig.apply(this, arguments);
        $(this).trigger(ev);
        return ret; // must include this
    }
})();

jQuery cssHooks怎么样?

也许我不明白这个问题,但是您正在搜索的内容很容易通过进行cssHooks,而无需更改css()功能。

从文档中复制:

(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 ); 

https://api.jquery.com/jQuery.cssHooks/

我有同样的问题,所以我写了这个。效果不错。如果将其与一些CSS过渡混合使用,效果会很好。

function toggle_visibility(id) {
   var e = document.getElementById("mjwelcome");
   if(e.style.height == '')
      e.style.height = '0px';
   else
      e.style.height = '';
}
本文地址:http://javascript.askforanswer.com/shifoukeyitingfenggegaibianshijian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!