onclick을 통해 요소 추가/제거

기본적으로 페이지의 링크에 데이터를 추가하는 기능으로 구성된 순수 JS로 작성된 크롬 확장자가 있습니다.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 나는 할 수 있도록 확장 기능에 의해 추가 된 데이터를 추가/삭제할 사용자가 클릭 할 수있는 "on/off"버튼을 구현하십시오. 이전에 생성 된 요소를 제거하는 함수를 작성하는 유일한 솔루션입니까?

출처

2013-06-26 Yogzzz

추가 요소에 클래스를 추가하십시오. 그런 다음 해당 클래스의 스타일 규칙을 수정하여 해당 클래스가있는 모든 요소를 표시하거나 숨기십시오. – RobG

이 실제로 Chrome 확장 프로그램입니까? –

데이터를 숨기는 경우 다음 (말하자면 hide-my-nifty-extension)를 body에 클래스를 추가, (당신이 뭔가와 충돌 상당히 가능성이되고 싶어요, 말 my-nifty-extension-extra —을)를 span에 클래스를 넣고 때를 제거 그것을 보여줍니다. 다음

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

: 그리고 당신의 appendChild 전에

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

예, 그런 다음이 스타일 규칙을 사용 Chrome 확장을 작성하는 기쁨의

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

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

(하나는 것입니다 classList 같은 것을 알고 있습니다.)

출처

2013-06-26 05:56:37

onclick을 통해 요소 추가/제거

답변

관련 문제