Javascript 单击按钮复制div元素及其CSS_Javascript_Html_Css

Javascript 单击按钮复制div元素及其CSS

javascript html css

Javascript 单击按钮复制div元素及其CSS,javascript,html,css,Javascript,Html,Css,我正在处理一个页面，其中有一个id为“exam”的div和一个id为“copy”的按钮。div包含文本“考试1”，并在其周围有一个2px的双黑边框。单击按钮时，应复制div元素，并在每次单击按钮时显示在其下方。我已经让这部分工作，但是，它似乎没有复制div元素的CSS，只有元素中的文本，所以每次我点击按钮，它只显示“考试1”，而不是边框这是我的HTML（还包括Javascript和CSS）：考试1坦纳·泰勒 #考试{ 边框：2件双黑； } 考试一 var=0； var TToriginal

我正在处理一个页面，其中有一个id为“exam”的div和一个id为“copy”的按钮。div包含文本“考试1”，并在其周围有一个2px的双黑边框。单击按钮时，应复制div元素，并在每次单击按钮时显示在其下方。我已经让这部分工作，但是，它似乎没有复制div元素的CSS，只有元素中的文本，所以每次我点击按钮，它只显示“考试1”，而不是边框

这是我的HTML（还包括Javascript和CSS）：


考试1坦纳·泰勒
#考试{
边框：2件双黑；
}
考试一
var=0；
var TToriginal=document.getElementById（“检查”）；
函数副本（）{
var TTclone=TToriginal.cloneNode（真）；
TTclone.id=“考试”++TTi；
TToriginal.parentNode.appendChild（TTclone）；
}

还有更多，但我删掉了没有处理这个特殊问题的部分。关于为什么点击按钮时不显示文本周围的边框，您有什么想法吗？

css只针对id

exam

，所有克隆都在更改该id。一个可能的解决方案是使用

[id^=“exam”]

^=

表示如果以“exam”开头，则使用此样式

演示：


考试1坦纳·泰勒
[id^=“考试”]{
边框：2件双黑；
}
考试一
var=0；
var TToriginal=document.getElementById（“检查”）；
函数副本（）{
var TTclone=TToriginal.cloneNode（真）；
TTclone.id=“考试”++TTi；
TToriginal.parentNode.appendChild（TTclone）；
}

您正在更改id。它只会在元素id为

exam

时更改样式，但不会更改id为

exam1

等的元素。可能需要使用类。我甚至没有注意到这一点，感谢您指出这一点。我可以通过从TTclone声明中删除+++TTi来解决这个问题。如果您想将此作为答案提交，我很乐意接受，这样您就可以获得积分：-）

<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>

<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>