如何找出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中。 否則，插件將繼續調整其大小。