1

我想创建一个名为<triangle>. 我想添加新的 CSS 属性，比如width-a,width-b和width-c. （三角形三边的宽度）。

我已经在 J​​avaScript 中进行了计算，我知道如何创建标签并附加它们，我知道如何查找所有<triangle>标签并更改它们的样式。

但是，如果将使用我的库作为<triangle>标签的人在 javascript 中附加了一个<triangle>标签，那么它就不会被格式化为它必须的格式。然后我想到了一个间隔，但是在三角形出现之前会有一个眨眼。

有没有办法修改appendChild（或createElement）函数，以便我修改将在附加之前附加的标签？

（当然，任何其他方式可以使某人只写：

var a=document.createElement("triangle");
a.style.borderA="100px";
a.style.borderB="100px";
a.style.borderC="100px";
document.body.appendChild(a);

将被接受）

请不要 jQuery

4

1 回答 1

1

你可以重写该createElement函数，注入一个地方来监听创建过程：

(function () {
    // cache the old createElement function
    var createElement = document.createElement;

    // override the createElement function
    document.createElement = function ( tag ) {
        // create a normal element
        var el = createElement.call(document, tag);

        // execute all pseudo-event handlers
        for (var i = 0, il = document.createElement.hooks.length; i < il; ++i) {
            document.createElement.hooks[i].call(el, el);
        }

        // still return the element
        return el;
    };

    // create a place to register "events"
    document.createElement.hooks = [];
})();

一旦被覆盖，您就可以自由地进入创建过程。现在，您创建的任何新三角形都将自动设置其样式属性： 

// register a new "event" hook
document.createElement.hooks.push(function () {
    if (this.tagName === 'TRIANGLE') {
        this.style.borderA = "100px";
        this.style.borderB = "100px";
        this.style.borderC = "100px";
    }
});

var el = document.createElement('triangle');
document.body.appendChild(el);
于 2012-06-13T14:39:07.810 回答