复制按钮上的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>

还有更多，但我切出未与这一具体问题处理的部分。任何想法为什么当按钮被点击时它不显示文本边框？

你正在改变的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>

复制按钮上的div元素和他们的CSS点击

相关推荐