버튼 클릭시 div 요소와 해당 CSS 복제하기

id가 "exam"인 div와 "copy"라는 ID가있는 div가있는 페이지에서 작업하고 있습니다. div에는 텍스트 "Exam 1"이 포함되어 있으며 주위에 2 픽셀 x 검정색 테두리가 있습니다. 버튼을 클릭하면 버튼을 클릭 할 때마다 div 요소가 복제되어 표시됩니다. 그 부분을 작동 시키려고했지만 div 요소의 CSS, 요소 안의 텍스트 만 복사하는 것 같지 않습니다. 그래서 버튼을 클릭 할 때마다 "Exam 1"이 표시되지만 테두리는 표시되지 않습니다. .버튼 클릭시 div 요소와 해당 CSS 복제하기

은 여기 내 HTML (이 또한 자바 스크립트와 CSS를 포함)이다

이

<html> 
    <head> 
     <title>Exam 1 Tanner Taylor</title> 
     <style type="text/css"> 
      #exam { 
       border: 2px double black; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="exam"> 
     Exam 1 
     </div> 
     <input type="button" id="copy" value="Make Copy" onclick="copy()" > 
    </body> 

    <script type = "text/javascript"> 
      var TTi = 0; 
      var TToriginal = document.getElementById("exam"); 
      function copy() { 
       var TTclone = TToriginal.cloneNode(true); 
       TTclone.id = "exam" + ++TTi; 
       TToriginal.parentNode.appendChild(TTclone); 
      } 
    </script> 
</html>

이 더있다, 그러나 나는이 특정 문제를 처리하지 않은 부분을 잘라. 버튼을 클릭했을 때 텍스트 주변에 테두리가 표시되지 않는 이유에 대한 아이디어가 있습니까?

출처

2014-09-27 Beth Tanner

당신은 ID를 변경합니다. 요소의 id가'exam' 일 경우에만 스타일을 변경하지만, id가'exam1' 인 요소는 변경하지 않습니다. 클래스를 사용하십시오. – Dom

나는 그것을 알아 차리지 못했지만 그것을 지적 해 주셔서 감사합니다. TTclone 선언에서 + + TTi를 제거하는 것으로 문제를 해결할 수있었습니다. 이 질문을 답으로 제출하려면 답변을 기꺼이 받아서 기꺼이 받으실 수 있습니다 :-) –

CSS는 id exam만을 타겟팅하며 모든 복제본은 해당 ID를 변경합니다. 가능한 해결책은 [id^="exam"]을 사용하는 것입니다.

^=은 "exam"으로 시작하면이 스타일을 사용합니다.

DEMO : http://jsbin.com/xupuqavecope/2/edit

<html> 
    <head> 
     <title>Exam 1 Tanner Taylor</title> 
     <style type="text/css"> 
      [id^="exam"] { 
       border: 2px double black; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="exam"> 
     Exam 1 
     </div> 
     <input type="button" id="copy" value="Make Copy" onclick="copy()" > 
    </body> 

    <script type = "text/javascript"> 
      var TTi = 0; 
      var TToriginal = document.getElementById("exam"); 
      function copy() { 
       var TTclone = TToriginal.cloneNode(true); 
       TTclone.id = "exam" + ++TTi; 
       TToriginal.parentNode.appendChild(TTclone); 
      } 
    </script> 
</html>

출처

2014-09-27 00:38:16 Dom

버튼 클릭시 div 요소와 해당 CSS 복제하기

답변

관련 문제