检测使用 javascript 动态分配的 css 样式/属性

Detect a css style/attribute assigned dynamically with javascript

本文关键字：css 样式 属性 动态分配 javascript 检测      更新时间：2023-09-26

我正在使用Jquery Cycle插件进行幻灯片放映，我想在某个幻灯片处于活动状态时添加一个事件。Cycle 插件通过在某个div 中添加和删除图像的不透明度来实现这一点，如下所示：

<div style="position: absolute; top: 0px; z-index: 9; display: none; opacity: 0;">

当图像处于活动状态或当前幻灯片时，不透明度更改为 1，显示变为"阻止"。

现在我尝试使用不同的方法，从检测div 的 css 样式/属性到为所述div 分配一个类，然后做一些事情：

if($("#slideshow > div:nth-child(2)").hasClass('fadeOut') == 1) {
    alert('Hello');
}

或

if($("#slideshow > div:nth-child(2)").css('opacity') == 1) {
    alert('Hello');
}

甚至 

if($(".fadeOut").css('opacity') == 1) {
    alert('Hello');
}

问题是 JS 在使用 Cycle 插件动态应用时不会检测到"不透明度：1"样式。另一方面，当样式在 css 文件中内联应用时，它确实有效，当然，这不起作用，因为事件在加载页面的那一刻触发，而我想要的是当且仅当第二个图像是活动图像时触发事件，换句话说， 当它将"不透明度"设置为 1 或将"显示"设置为阻止时，似乎无法弄清楚。

您应该能够使用所有方法确定元素的当前状态。我想问题是在正确的时间查找它们。

只是：您无法检测到样式属性或类属性何时更改。抓住这一点的唯一方法是监听 DOMModification 事件——一种相当丑陋的方式。

所以：使用另一个插件。将有幻灯片插件在元素更改图像时触发元素上的[自定义]事件。

这样的东西对你有用吗？

.html

<p></p>
<div class="slideshow">
    <img id="1" src="http://davealger.info/i/1.jpg" />
    <img id="2" src="http://davealger.info/i/2.bmp" />
    <img id="3" src="http://davealger.info/i/3.png" />
</div>

.css

.slideshow { position:relative; }
.slideshow img { position:absolute; left:0; top:0; }​

.js

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
        var me=$('.slideshow :first-child');
        if ( me.attr('id') === '1' )
            $("p:last").html('getting ready to load slide 2');
        else
            $("p:last").html('');
        me.fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');
    }, 4000);
});​

下面的演示链接

http://jsfiddle.net/DaveAlger/CWkYt/

相关文章：