2013-06-26 292 views
1

我有一個用純JS編寫的chrome擴展,它基本上由將數據附加到頁面上的鏈接的函數組成。通過onclick添加/刪除元素

的基本上只是追加到從另一個函數傳遞中的鏈接元素的點擊整數功能示例:

function addCounttoLinks(link, counts) { 
    var clicks = counts.split(":")[1].split(",")[0].trim(); 
    var count = document.createTextNode((" (" + clicks + ")")); 
    var dspan = document.createElement("span"); 
    dspan.appendChild(count); 
    dspan.style.fontSize = "10px"; dspan.style.textAlign = "center"; 
    link.appendChild(dspan); 
} 

什麼是執行/最有效的方法unexecute這些功能,讓我可以爲用戶實現一個「開/關」按鈕,以點擊將添加/刪除擴展附加的數據。是唯一的解決方案來編寫函數來刪除以前創建的元素?

+0

將一個類添加到額外的元素。然後修改該類的樣式規則以使該類的所有元素可見或不可見。 – RobG

+0

這真的是一個Chrome擴展嗎? –

回答

0

把一類的span(比如說,my-nifty-extension-extra   —你希望它是相當不可能用別的東西發生衝突),然後添加一個類body(比如,hide-my-nifty-extension)隱藏數據時,當將其刪除顯示它。之前你appendChild

body.hide-my-nifty-extension span.my-nifty-extension-extra { 
    display: none; 
} 

例如,:

dspan.className = "my-nifty-extension-extra"; 

然後:然後使用這個樣式規則

function showExtraData() { 
    document.body.classList.remove('hide-my-nifty-extension'); 
} 

function hideExtraData() { 
    document.body.classList.add('hide-my-nifty-extension'); 
} 

(單寫一個Chrome擴展的樂趣就是你知道你有類似classList的東西。)