html中新標籤的瘋狂想法

我想創建一個名爲<triangle>的標籤。我想添加新的CSS屬性，如width-a,width-b和width-c。（三角形的三邊的寬度）。html中新標籤的瘋狂想法

我已經在JavaScript中進行了計算，我知道如何創建標籤並追加它們，並且我知道如何查找所有<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，請}

來源

2012-06-13 Mageek

也許您可以使用HTML中的數據值。 **數據寬度A = 100像素;數據寬度B = 100像素;數據寬度C = 200像素; **。數據屬性很容易操作，並可以標準化其他人使用。 – MurifoX

@MurifoX使用數據值不會改變任何內容。即使我使用數據值，並且使用我的庫的人在javascript中添加標籤，渲染也不會是三角形（除非我在setInterval中搜索所有三角形標籤，但在三角形出現之前它肯定會閃爍） – Mageek

不是真正的答案，但添加一個名爲的新html標記並不是一個好主意，您可以改爲使用。 – korko

可以覆蓋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-13 14:39:07 Eli

這就是結果：http://www.3alinter.net/triangle.html – Mageek

html中新標籤的瘋狂想法

回答

相關問題