javascript - 当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 .

First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.

There are two ways to track css changes.

1. Examine the DOM element for css changes every x time(500 milliseconds in the example).
2. Trigger an event when you change the element css.
3. Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.

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

• > MutationObserver (如果你能放弃旧的 IE)
• > CSS Element Queries

---

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

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