我正在处理一个页面，该页面有一个 ID 为“exam”的 div 和一个 ID 为“copy”的按钮。 div 包含文本“Exam 1”，周围有一个 2px 的双黑色边框。单击按钮时，div 元素应该被复制并在每次单击按钮时显示在下方。我已经让那部分工作了，但是，它似乎并没有复制 div 元素的 CSS，只有元素内的文本，所以每次我单击按钮时，它只显示“考试 1”，而不是边框.
这是我的 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>
还有更多内容，但我删除了未处理此特定问题的部分。关于单击按钮时为什么不在文本周围显示边框的任何想法？
最佳答案
CSS 仅针对 id exam，所有克隆都在更改该 id。一个可能的解决方案是使用 [id^="exam"]。
^= 表示如果它以“exam”开头，则使用这种样式。
演示: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>
关于javascript - 单击按钮复制 div 元素及其 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26070052/