javascript - 在javascript中从对象创建DOM元素

Question

您好，我正在尝试了解如何制作 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 中的事件元素？谢谢

Answer 1

要创建 DOM 元素，您可以使用 document.createElement，如下所示:

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

那个 elm 已经有一个名为 style 的属性；然后你可以分配给它的成员，例如:

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

A for..in loop在你的 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);

注意事件名称的不同，它没有第三个参数。

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

someOtherElement.appendChild(elm);

更多探索:

• DOM2 Core
• DOM2 HTML
• DOM3 Core
• HTML5 Web Application APIs

---

因为 addEventListener/attachEvent 浏览器不兼容和其他各种小问题，并且因为它们提供了很多预打包的实用功能，所以很多人(包括我)使用像 jQuery 这样的 JavaScript 库, YUI , Closure , 或 any of several others帮助解决这些问题。