複製按鈕上的div元素和他們的CSS點擊

我正在一個頁面上有一個ID爲「exam」的ID和一個ID爲「copy」的按鈕。該div包含文本「考試1」，並在其周圍有2px雙黑色邊框。當點擊按鈕時，div元素應該被複制並在每次單擊按鈕時顯示。我已經得到了該部分的工作，但它似乎並沒有複製div元素的CSS，只有元素內的文本，所以每次我點擊按鈕，它只顯示「考試1」，而不是邊框。複製按鈕上的div元素和他們的CSS點擊

這裏是我的HTML（這也包括JavaScript和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 2014-09-27 00:31:03

我甚至沒有注意到，謝謝指出。我能夠解決這個問題，就是從TTclone聲明中刪除+ ++ TTi。如果你想提交這個答案，我很樂意接受它，所以你得到它的榮譽:-) – 2014-09-27 00:35:48

該css只針對編號爲exam，所有克隆都在更改該ID。可能的解決方案是使用[id^="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點擊

回答

相關問題