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

Question

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

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

对我来说，这意味着一些javascript或jquery导致了这一点。但是，如果我认为这是一个导致这种情况的脚本，我如何才能找到对其进行更改的内容。

有关详细信息，如果您转到zhang-jason.com（我的投资组合），右键单击其中一个大型div（文章或项目），您将看到上述样式为<div class="bottom-section hide-me-until-december vegas-container">。< / p>

当我点击它时，我复制了它影响的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中的元素大小，你必须右键单击该元素并选择Break on＆gt;修改了属性，当css被修改时它会破坏你，然后你可以查看源选项卡来检测函数

Answer 2

所以你正在使用拉斯维加斯幻灯片插件，我会想象它正在为div应用一个大小，因为它有类“维加斯容器”。尝试将div放在vegas-container div中，或者放入div中的vegas容器div。否则插件将继续调整大小。