4

こんにちは、Dom要素を作成する方法を理解しようとしています。データオブジェクトから「div」としましょう。次のようなオブジェクトを作成しました。

var div = {

        style : {
            width: Math.floor(Math.random() * 100),
            height: Math.floor(Math.random() * 100),
            position: "relative",
            top:Math.floor(Math.random()*500)
        },

        sayHi: function () {
            alert("Hello");
        },

    }

私が今する必要があるのは、これらのcssパラメーターを使用してDOMでライブ要素にすることですか? ありがとうございました

4

2 に答える 2

3

DOM 要素を作成するには、次document.createElementのように を使用します。

var elm = document.createElement('div');

それにはすでに;elmというプロパティがあります。style次に、そのメンバーに割り当てることができます。

elm.style.width = div.style.width + "px"; // Remember this is CSS, you need units

あなたのfor..inループdiv.styleはそこで役立つかもしれませんが、ユニットのことを必ず処理してください。

onXyzそれにイベント ハンドラーをアタッチするには、次のようにプロパティに割り当てる古い DOM0 のことを行うことができます。

elm.onclick = div.sayHi;

...これによりsayHi、クリック時に関数が実行されますが、より現代的な方法は次のaddEventListenerとおりです。

elm.addEventListener('click', div.sayHi, false);

古いバージョンの IE には がありませんがaddEventListener、MS 専用の前身である がありattachEventます。

elm.attachEvent('onclick', div.sayHi);

イベント名の違いに注意してください。3 番目の引数がありません。

elmどこかのページに追加しない限り、これはすべてアカデミックです。:-) ページ上の別の要素への参照を取得してから、次のように呼び出すことで、これを行うことができますappendChild。

someOtherElement.appendChild(elm);

さらに探索する:

addEventListener/ブラウザの非互換性やその他のさまざまなattachEvent小さなこと、および事前にパッケージ化されたユーティリティ機能が多数提供されているため、(私を含む) 多くの人がjQuery、YUI、Closure、またはいくつかのいずれかのJavaScript ライブラリを使用しています。他の人がこのことを手伝ってくれます。

于 2012-06-07T09:45:42.937 に答える
1

これを試して

var DOMdiv = document.createElement("div");
for(var key in div) {
    if(key === "style") {
        for(var cssstyle in div[key]) {
            DOMdiv.style[cssstyle] = div[key][cssstyle];
        }
    } else {
        DOMdiv[key] = div[key];
    }
}
document.body.appendChild(DOMdiv);

ただし、この Div には という関数がsayHi()関連付けられていることに注意してください。開始されたイベントハンドラーなどはありません。イベントハンドラが必要な場合は、オブジェクトを次のように変更します。

var div = {

     [...]


     onclick: function() {
         alert("Hi");
     }

 };
于 2012-06-07T09:49:07.660 に答える