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

这应该有效：

$("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
        });
});

Answer 2

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

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

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


每隔x次检查DOM元素的css更改（示例中为500毫秒）。

你更改元素css时触发事件。

使用DOMAttrModified突变事件。但是它被弃用了，所以我会跳过它。

如今，还有更多解决方案。

MutationObserver（如果你可以删除旧的IE）
CSS Element Queries

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

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

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

2 个答案: