是否有一种方法来拦截/监控Javascript中的CSS属性改变使用香草Javascript

Is there is a way to intercept/monitor in Javascript that CSS property changed using vanilla Javascript

本文关键字：Javascript CSS 中的 属性 监控 改变 香草 一种 方法 是否      更新时间：2023-09-26

是否有一种方法可以在Javascript中拦截/监控使用香草Javascript更改的CSS属性?比如改变宽度属性:

.div {
    width:100px;
}
.div:hover {
   width:200px;
}

…

<div class="div">Blah</div>

编辑:我的意思不是悬停状态的改变，我想检测的宽度属性的DIV改变。它可能是任何其他属性或任何其他改变属性的方式:例如，我输入div. classname = "div bigBox"，其中:

.bigBox { width:200px;height:200px }

，我想知道高度属性改变了!

您可以设置一个间隔，并观察所讨论的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);
}

试试:http://jsfiddle.net/wAtvp/6/

无法检测到类/宽度的变化。

您可以检测悬停。

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

你可能想看看JQuery 1.4.3+中提供的cssHooks，而不是轮询

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

相关文章：