17

私たちは JavaScript で非常に恐ろしい問題に直面しており、誰も解決できないようです。

コンポーネントが実際にページに表示されていない状態で、子やボックスモデル全体などを含む DOM 要素の幅と高さを取得するにはどうすればよいでしょうか?

覚えておいてください：私は提案を探しています。質問に完全に答えていない (または指定されたパラメーターに完全に適合していない) 回答でさえ、役立つ可能性があり、おそらく役立つでしょう。

主な目標: Javascript を介して HTML 要素をページに追加しています。データベースからのサイズとスタイルを持つ HTML 要素です。問題は、それらが誤動作し、通常は配置が悪いことです。パディング/マージンが原因で、ある要素が別の要素よりも大きいため、これらの問題を修正するには実際のサイズを確認する必要があります。

結果として得られるアプリケーションは、BigMacAttack がコメントで説明したように、「サードパーティの HTML コントロールの緊密に編成されたモザイク」となるでしょう。本格的なデスクトップ アプリケーションのように見える必要があり、HTML はそのアイデアを熱心に嫌うようです。私がそれを責めているわけではありません。

とにかく、ここにいくつかのサンプルコードがあります：

JavaScript:

function exampleElement(caption, content) {
    this.caption = caption;
    this.content = content;
    this.rootElement = document.createElement("div");
}

exampleElement.prototype.constructElement = function() {
    var otherElement = document.createElement("p");
    this.rootElement.className = "exampleElement";
    this.rootElement.textContent = this.caption; 
    otherElement.className = "exampleP";
    otherElement.textContent = this.content;
    this.rootElement.appendChild(otherElement);
    /*I need to know size of the otherElement here*/
    /*here goes code adding stuff into rootElement*/
};

window.onload = function() {
    var ex = new exampleElement("Hello", "Here's text");
    ex.constructElement();
    document.body.appendChild(ex.rootElement);
};

CSS:

.exampleElement {
    padding: 5px;
    margin: 6px;
}

.exampleElement .exampleP {
    padding: 20px;
    margin: 6px;
}

フィドル

ここで、ページがウィンドウのサイズと個々のコンポーネントのコンテンツに動的に反応する必要があります。そのため、オブジェクトを表示する前にオブジェクトのサイズを取得できることが重要です。また、オブジェクトの作成が 3 つのフェーズに明確に分かれていることも重要です。

  • new による作成

  • DOM ツリーの構築 (constructElement)

  • ドキュメントへの追加 (本体または別の DOM ツリーへの追加)

建設段階で個々の要素のサイズを把握しておくことが重要です。

これまでのところ、jQuery、DOM の幅と高さの属性を介して測定を試みましたが、いずれもページに直接表示されていない DOM オブジェクトでは機能しません。私が試した別のアプローチは、オブジェクトを document.body に追加し、幅と高さを取得してからすぐに削除するいくつかの関数でした。コンポーネントがかなり複雑になるにつれて、ひどいパフォーマンスとメモリの浪費になります。

.CSS ファイルを完全に削除し、JS を介して直接スタイルを定義するアプローチは、少なくとも私たちの苦境の一部を解決すると思いますが、もっと良い方法が必要です。

より多くのアイデアや提案を得るために報奨金を開始します。答えが質問の境界内に完全に収まっていなくても（どうやって/したかなど）、人を撃つだけです-私が達成しようとしている目標は、JSで生成されたHTMLコントロールが適切に収まるようにすることです。

4

7 に答える 7

1

この jQuery プラグインを試すことができます: https://github.com/dreamerslab/jquery.actual

于 2013-09-24T03:20:16.243 に答える
1

ここでの問題は、この要素をページに追加する前に要素のサイズを取得できないことです。

メソッド「constructElement」では、要素をルート要素に追加しますが、オンロード時にページに追加します。プロパティ「rootElement」にサイズ プロパティが設定されていません。

これらのプロパティを操作する場合は、オブジェクト/メソッドの構造を再考してください。

あなたのフィドルの私の更新を見てください

$(function ()
{
    var ex = new exampleElement("Hello", "Here's text");
    ex.constructElement();
    document.body.appendChild(ex.rootElement);

    $("<span/>")
        .text(" => Width is " + $("div").width() + ", and Height is " + $("div").height())
        .appendTo($("div p"));
});
于 2013-09-25T14:23:49.710 に答える
1

関連する回答を求めていたので...

DOM 要素がコンテンツによって動的にサイズ変更されない場合は、次のワークフローをお勧めします。

DOM 構造が少し肥大化する可能性がありますが、多くの場合、「コンテナー」オブジェクトを使用する方が適切です。これらのオブジェクトには、DOM のサイズを予測可能な状態に保つために、境界線、パディング、またはマージンがありません。次に、コンテナの境界内で子をぴったりと拡張することができます。

サイズの歪みを説明する追加の属性がないため、コンテナー オブジェクトは特定のサイズと配置のクエリに使用されます。

http://jsfiddle.net/aywS6/

CSS

#container {
    position: absolute;
    margin:0px;
    padding:0px;
    width: 300px;
    height: 100px;
    background: #aaa;
    border: 0 none;
}

#subject {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 10px 20px;
    background: #aaf;
}

HTML

<div id="container">
    <div id="subject">
        contents...
    </div>
</div>
于 2013-09-24T15:51:38.657 に答える
0

画面に配置する前にサイズを取得できないことが主な問題である場合は、ページの背景の下に div を非表示にできるクラスを作成することをお勧めします。これはクロスブラウザで動作するはずです。

.exampleHidden{
    position: absolute;
    z-index: -1;
}

ページの z-index のメインの背景を 0 に設定した場合、非表示のクラスを新しい要素にアタッチすると、背景の下に配置されます。背景よりも大きくないと仮定すると、.exampleHidden クラスを削除して実際に前景に戻す前に、高さと幅を測定して設定できるように、今のところ非表示にする必要があります。

于 2013-09-26T17:47:12.530 に答える
0

それが役立つかどうかはわかりませんが、あなたが何か答えを求めたので:)ここに私が持っているものがあります.

HTMLコンテナのサイズを内部コンテンツに応じて「自動」の高さと幅に変更するための素敵なjQuery効果が必要な同様の問題がありました。アイデアは、一部の人々がすでにここで言及したものとまだ似ています: 「画面外」のどこかにコンテナがあり、そこに自分のものを置き、寸法を測定して削除します。だからここに私が見つけた機能がありますhere

jQuery.fn.animateAuto = function(prop, speed, callback) {
    var elem, height, width;
    return this.each(function(i, el) {
        el = jQuery(el), elem = el.clone().css({
            "height" : "auto",
            "width" : "auto"
        }).appendTo("body");
        height = elem.css("height"), width = elem.css("width"), elem.remove();

        if (prop === "height")
            el.animate({
                "height" : height
            }, speed, callback);
        else if (prop === "width")
            el.animate({
                "width" : width
            }, speed, callback);
        else if (prop === "both")
            el.animate({
                "width" : width,
                "height" : height
            }, speed, callback);
    });
};

このコードには必要以上のものがありますが、興味のある部分は次のとおりです。

elem = el.clone().css({
                "height" : "auto",
                "width" : "auto"
}).appendTo("body");
height = elem.css("height")
width = elem.css("width")

お役に立てれば

于 2013-09-25T04:47:57.983 に答える