在 JavaScript 中从对象创建 DOM 元素

嗨，我试图了解如何制作 Dom elemnt，比如说“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 中的活动元素？ 谢谢

要创建 DOM 元素，您可以使用document.createElement， 像这样：

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

That elm已经有一个名为style;然后您可以分配给其成员，例如：

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

A for..in loop http://blog.niftysnippets.org/2010/11/myths-and-realities-of-forin.html在你的div.style那里可能有用，但一定要处理好单位的事情。

要向其附加事件处理程序，您可以执行旧的 DOM0 操作，即分配给onXyz属性，像这样：

elm.onclick = div.sayHi;

...这将使其运行sayHi单击即可运行，但更现代的方法是通过addEventListener:

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

老版本的IE没有addEventListener，但他们确实有其仅限 MS 的前身，attachEvent:

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

请注意事件名称的差异，它没有第三个参数。

所有这些都是学术性的，除非你添加elm到页面的某处。 :-) 您可以通过获取对页面上另一个元素的引用，然后调用来做到这一点appendChild:

someOtherElement.appendChild(elm);

更多探索：

• DOM2核心 http://www.w3.org/TR/DOM-Level-2-Core/
• DOM2 HTML http://www.w3.org/TR/DOM-Level-2-HTML/
• DOM3核心 http://www.w3.org/TR/DOM-Level-3-Core/
• HTML5 Web 应用程序 API http://www.w3.org/TR/html5/webappapis.html#webappapis

因为像这样的事情addEventListener / attachEvent浏览器不兼容和其他各种小问题，并且因为它们提供了很多预打包的实用功能，所以很多人（包括我）使用 JavaScript 库，例如jQuery http://jquery.com, YUI http://developer.yahoo.com/yui/, Closure http://code.google.com/closure/library, or 其他几个中的任何一个 http://en.wikipedia.org/wiki/List_of_JavaScript_libraries来帮助处理这些事情。