是否有一种方法可以在Javascript中拦截/监视CSS属性使用vanilla Javascript更改的情况

是否有一种方法可以在Javascript中拦截/监视CSS属性使用vanilla Javascript更改的情况？例如，宽度属性的更改：

.div {
    width:100px;
}

.div:hover {
   width:200px;
}

---

我想知道高度属性改变了

您无法检测到类别/宽度更改

您可以检测到悬停

document.getElementById('divID').onmouseover = function(event) {
    //do something
}

---

您可以设置一个时间间隔并观察有问题的css属性：

var cssWatchInterval = false;
function cssWatch (element, property, handler) {
    if (cssWatchInterval !== false)
        clearInterval(cssWatchInterval);
    var comp = element.currentStyle || getComputedStyle(element, null);
    var current_prop_value = comp[property];
    cssWatchInterval = setInterval(function () {
        var comp = element.currentStyle || getComputedStyle(element, null);  
        if (comp[property] != current_prop_value) {
            stopCssWatch();
            handler(element);
        }
    }, 250);
};
function stopCssWatch() {
    clearInterval(cssWatchInterval);
}

---

在这里尝试：

您可能希望查看JQuery 1.4.3中提供的cssHooks，而不是轮询+

---

当人们问我“我可以用‘香草’JavaScript做类似jQuery的框架吗？”我真的很沮丧，当然你可以！你认为这些框架是用什么写的？！？香草JavaScript！如果他们能做到，你也能做到。如果他们不能，您可能无法，但也有可能他们根本没有找到值得包含在框架中的可靠方法。框架不是魔法。它们是JavaScript。

好吧，因为我不想仅仅因为只有jQuery可以这样做就向我的项目添加XXKb。jQuery（以及大多数，如果不是所有其他JS框架的话）都有免费可用的源代码。如果你只需要他们代码的一小部分，就去寻找你需要的，然后重新使用或重新实现它。我对你的问题并不感到沮丧。对不起，我给你留下了这样的印象。更多的是对人们对JS框架的误解的评论。关键是他们的库中有一大堆“普通”JavaScript。@g.d.d.c：请注意，这是我避免向新用户推荐框架的原因之一。我完全赞成走捷径，但你应该对你首先要走的是什么有一个概念——否则你的“捷径”可能是一条“长捷径”，而你也不会更聪明。您可以看到这样一种错误的看法，即一个人编写“jQuery”或一个人编写“javascript”，就好像它们是两个不同的东西一样。这与OP本身无关，但您到处都可以看到这种误解，这非常令人讨厌。@g.d.d.c您是对的，我将调查jQuery以找到这段代码。另外，我也想知道如何在jQuery下完成它，你能帮我吗？哇！老兄，这是一个很棒的网站！这是你的作品吗？JSFIDLE？哈哈，不！请记住，这是一个测试想法、向他人展示东西（问题和解决方案）的好方法，另外它还可以让你玩主要框架（或者根本没有框架）。谢谢你，例如，它可以工作，但只适用于样式属性更改，例如内联CSS，但是当样式表定义更改时，它不会检测到。。。。我尝试过el.style.getPropertyValue（“宽度”），但我认为它与el.style[“宽度”]相同，它被编辑为使用计算样式而不是内联样式。。。这将适用于基于CSS类的更改

document.getElementById('divID').onmouseover = function(event) {
    //do something
}

var cssWatchInterval = false;
function cssWatch (element, property, handler) {
    if (cssWatchInterval !== false)
        clearInterval(cssWatchInterval);
    var comp = element.currentStyle || getComputedStyle(element, null);
    var current_prop_value = comp[property];
    cssWatchInterval = setInterval(function () {
        var comp = element.currentStyle || getComputedStyle(element, null);  
        if (comp[property] != current_prop_value) {
            stopCssWatch();
            handler(element);
        }
    }, 250);
};
function stopCssWatch() {
    clearInterval(cssWatchInterval);
}