如何找出Javascript正在调整大小的元素

Question

当我查看Chrome Dev Tools时，它说我的一个div具有元素样式：

element.style {
    height: 300px;
    opacity: 1;
}

对我来说，这意味着某些javascript或jquery导致了这种情况。 但是，如果我正确地假设它是导致此更改的脚本，那么我如何找到对其进行更改的原因。

有关更多详细信息，如果您访问zhang-jason.com （我的投资组合），右键单击大div之一（文章或项目），则会看到上述样式为<div class="bottom-section hide-me-until-december vegas-container"> 。

我复制了单击它会影响的HTML：

<div class="bottom-section hide-me-until-december vegas-container" id="articles" style="height: 300px; opacity: 1;">
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburnsUpLeft" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/4.jpg&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburnsRight" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/5.png&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
    <div class="vegas-slide-inner vegas-animation-kenburnsDownLeft" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/6.jpg&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburns" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/6.png&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
    </div>
    <div class="vegas-slide vegas-transition-fade vegas-transition-fade-in" style="transition: all 4000ms;">
        <div class="vegas-slide-inner vegas-animation-kenburnsRight" style="animation-duration: 20000ms; background-image: url(&quot;img/bottom/ramen.jpg&quot;); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>    
    </div>
    <div class="vegas-overlay"></div>
    <div class="vegas-wrapper" style="overflow: hidden; padding: 0px;">
        <div class="bottom-wrap">
            <h2>Articles</h2>
            <div class="line">__</div>
        </div>
    </div>
</div>

Answer 1

要知道哪个函数正在调整chrome中的元素大小，您必须右键单击该元素，然后选择“中断>修改属性”，修改css时它将中断您的工作，然后您可以查看“源”选项卡以检测功能

Answer 2

因此，您使用的是vegas slideshow插件，并且我可以想象它正在对div应用大小，因为它具有“ vegas-container”类。 尝试将div放置在vegas-container div中，或将vegas容器div放置在div中。 否则，插件将继续调整其大小。