Question

我正在处理一个带有id＆＃34; div＆＃34;的div的页面上和一个ID为＃34;复制＆＃34;的按钮。 div包括文本＆＃34;考试1＆＃34;它周围有一个2px的双黑色边框。单击该按钮时，每次单击该按钮时，都应该复制div元素并显示在下方。我已经完成了那部分工作，但是，它似乎并没有复制div元素的CSS，只复制了元素中的文本，所以每次单击按钮时，它都是唯一的显示＆＃34;考试1＆＃34;，但不显示边框。

这是我的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>

还有更多内容，但我删除了没有解决这一特定问题的部分。有什么想法，为什么单击按钮时它没有显示文本周围的边框？

Answer 1

css仅定位ID 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

1 个答案: