当div的高度达到一定百分比时更改段落内容

Question

我正在为网站制作加载程序。 HTML如下：

<div class="loadingContainer">
    <div class="greyContainer">
        <img class="eggGrey" src="img/egg-grey.png">
        <p id="bluePercent">50%</p>
    </div>

    <div class="blueContainer">
        <img class="eggBlue" src="img/egg-blue.png">
        <p class="greyPercent">50%</p>
    </div>
</div>

当元素 blueContainer 的高度为 2% 时，我希望两个段落中的文本均为 2%。我希望段落文本始终以 blueContainer 的百分比显示高度。高度值是通过外部 CSS 文件应用的，我不太精通 Javascript 语言，我尝试了一些方法，但我不知道该怎么做。

编辑：我尝试过的一些事情（并且可能惨遭失败）：

function percentages(){
     document.getElementByClassName("greyPercent, bluePercent"){
         if (document.getElementByClassName("greyContainer, blueContainer"){
        }
    }
}

这也是我被困住的地方，因为我不知道如何告诉 javascript 在元素具有一定高度时运行该函数。

编辑：这是一个 jsfiddle 来说明我在做什么。由于缺少图像，我给容器设置了背景色。

https://jsfiddle.net/1s5tw6es/

Answer 1

来自https://stackoverflow.com/a/9628472/2818869。

首先，没有开箱即用的 css-changes 事件，但您可以 自己创建一个，因为onchange 仅适用于:input 元素。 不适用于 CSS 更改。

有两种方法可以跟踪 CSS 更改。

1. 每隔 x 次（在示例中为 500 毫秒）检查 DOM 元素的 CSS 更改。
2. 您更改元素 css 时触发事件。
3. 使用DOMAttrModified 突变事件。但它已被弃用，所以我将跳过它。

现在，有更多的解决方案。

• MutationObserver（如果你可以放弃旧的 IE）
• CSS Element Queries

---

但在这种情况下，我会创建像 setProgress 这样的函数，它会同时改变元素高度和段落。

示例：http://jsfiddle.net/e59u3p4j/1/

Answer 2

这应该可行：

$("document").ready(function(){  //In case you didn't use this

    $(window).resize(function(){
            $('#bluePercent').html($('.blueContainer').css('height')/16.0*100); //Converting height into percentage and adding it to the p tag
        });
});