javascript - 相対領域を取得するための再帰関数の追加

Question

次の再帰関数は、タグ名を持つすべての HTML 要素で実行されます。body 要素から始まり、葉まで続きます。各要素について、コードは背景色とピクセル単位の要素領域 (存在する場合) を取得します。

  function findAllElements(element){
     if(element.tagName){    
       // getting the element background color and puts it in var "BGcolor"
       // getting the element area and puts it in var "AREA"
       // console.log both BGcolor and AREA with element.nodeName
        var children =element.childNodes;
        for (var i= 0;i<children.length;i++){
        findAllElements(children[i]);   
        }
    }
    // do something
   }

問題：

各要素の相対面積を計算する必要があります。たとえば、DIV 内に DIV がある場合、内側の DIV は適切な領域になり、外側の div は彼の領域から内側の div 領域を差し引いたものになります。

上の図では、出力は次のようになります。内側の DIV 領域は100pxで、外側の DIV は 400-100 = 300pxです。

これは他の要素にも見られます (P タグ内の STRONG タグ、DIV 内の TABLE など)。

必要なもの:この特定の再帰関数にいくつかのコード行を追加する必要があります。これにより、上記の相対領域が得られます。1つのソリューションは、すべての子領域を合計し、親ノードからそれを減らすバリアントにすることができます。

うまくいくものを追加することに成功しませんでした... :(

重要事項:

1)私は多数の異なる要素を実行しているので、これはこのDIVの例だけでなく、すべてのタイプで機能するはずです

2）色の取得方法や面積の計算方法の定義を探しているわけではありません。すでに定義があり、問題を単純化するために言及しませんでした。私が探しているのは、この子領域を追加する場所と方法です

どうもありがとうございました