8

我正在尝试找到一种方法来检测元素样式的变化，但我运气不佳。下面的代码适用于我定义的新属性，例如 tempBgColor，但我无法覆盖/隐藏现有属性，例如颜色。我知道 jquery 有一个监视功能，但它只检测来自 jquery api 的更改，而不是直接更改像 elem.style.color 这样的样式的值。

var e = document.getElementById('element');
e.style.__defineGetter__("color", function() {
   return "A property";
});
e.style.__defineSetter__("color", function(val) {
    alert("Setting " + val + "!");
});

任何指针？

4

3 回答 3

17

您应该可以使用MutationObserver来执行此操作- 请参阅演示（仅限 Webkit），这是一种新的、闪亮的方式来获取有关 DOM 更改的通知。旧的，现在已弃用的方式是Mutation events。

Demo 只是在单击段落时将旧值和新值登录到控制台。请注意，如果旧值是通过非内联 CSS 规则设置的，则旧值将不可用，但仍会检测到更改。

HTML

<p id="observable" style="color: red">Lorem ipsum</p>​

JavaScript

var MutationObserver = window.WebKitMutationObserver;

var target = document.querySelector('#observable');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('old', mutation.oldValue);
    console.log('new', mutation.target.style.cssText);
  });    
});

var config = { attributes: true, attributeOldValue: true }

observer.observe(target, config);

// click event to change colour of the thing we are observing
target.addEventListener('click', function(ev) {
    observable.style.color = 'green';
    return false;
}, false);

感谢这篇博文，上面的一些代码。

于 2012-11-26T14:28:56.067 回答
17

打开 Chrome 的开发者工具，您可以找到您感兴趣的样式更改的元素，右键单击它，选择“Break on...”和“属性修改”。

于 2015-06-15T21:59:58.350 回答
1

这是一个使用 setTimeout 和 undescorejs 的幼稚实现。

找出进行了哪些更改的唯一方法是遍历样式对象属性。

这是现场示例

$( function () {
  var ele = document.getElementById('ele'), 
      oldStyle = {};

function checkEquality() {
  style = _.clone(ele.style);
  if (!_.isEqual(style, oldStyle)) {
    console.log('Not equal');
    oldStyle = _.clone(style);
  } else {
    console.log('Equal');
  }
  _.delay(checkEquality, 2000);
}

checkEquality();

$('a#add_prop').on('click', function () {
  var props = $('#prop').val().replace(/ /g, '').split(':');
  console.log(props);
  $(ele).css(props[0], props[1]);
});

$('#prop').on('keydown', function (e) {
  if (e.keyCode == 13) {
    $('a#add_prop').trigger('click');    
  }
});

});
于 2012-11-26T15:14:19.880 回答