4

嗨，我正在尝试了解如何制作 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 中的实时元素？谢谢

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);

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

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

someOtherElement.appendChild(elm);

更多探索：

由于addEventListener/attachEvent浏览器不兼容和其他各种小问题，并且因为它们提供了许多预打包的实用程序功能，很多人（包括我）使用 JavaScript 库，如jQuery、YUI、Closure或任何几个其他人来帮助这些东西。

于 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 回答