1

。という名前のタグを作成したいと思います<triangle>。そして、、、、などの新しいcss属性を追加したいと思いwidth-aます。（三角形の3辺の幅）。width-bwidth-c

<triangle>私はすでにJavaScriptで計算を行っており、タグを作成して追加する方法と、すべてのタグを検索してスタイルを変更する方法を知っています。

しかし、私のライブラリを<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 に答える