如何将样式表应用于动态创建的元素？
[英]How to apply style sheets to dynamically created elements?
问题描述
this should be an easy one: I have the following code: 
这应该很简单：我有以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var table = document.createElement("table");
table.setAttribute("id","table");
var headRow = document.createElement("tr");
var dataRow = document.createElement("tr");
var head = document.createElement("th");
var data = document.createElement("td");
head.innerHTML="head";
data.innerHTML="data";
headRow.appendChild(head);
dataRow.appendChild(data);
table.appendChild(headRow);
table.appendChild(dataRow);
console.log(document.styleSheets);
table.className = "table";
document.getElementById("test").appendChild(table);
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
The problem is: The style specified in the bootstrap.min for the class "table" is never applied upon loading the side. 问题是：在加载边时，从不应用bootstrap.min中为类“table”指定的样式。 Do I have to do something additionally? 我还需要做些什么吗？ I test it in the most recent version of Safari. 我在最新版本的Safari中测试它。
Any Help? 任何帮助？
Cheers Twerp 干杯Twerp
4 个解决方案
解决方案1
5 已采纳 2015-08-18 09:59:59
It is not dynamically created issue. 它不是动态创建的问题。 It is because you haven't set the class to table. 这是因为您没有将类设置为table。 As Bootstrap Docs says: 正如Bootstrap Docs所说：
You have to use <thead> and <tbody> for the class to work. 您必须使用<thead>和<tbody>才能使用该类。
To add in your answer: 要添加你的答案：
var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);
Add this for a quick fix: 添加此项以进行快速修复：
$("tr:first-child").wrap("<thead/>");
Your final code should look like: 您的最终代码应如下所示：
var table = document.createElement("table");
table.setAttribute("id","table");
var headRow = document.createElement("tr");
var dataRow = document.createElement("tr");
var head = document.createElement("th");
var data = document.createElement("td");
var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);
head.innerHTML="head";
data.innerHTML="data";
headRow.appendChild(head);
dataRow.appendChild(data);
table.appendChild(thead);
table.appendChild(tbody);
console.log(document.styleSheets);
table.className = "table";
document.getElementById("test").appendChild(table);
解决方案2
3 2015-08-18 10:06:02
The slight difference in styling is because Bootstrap relies on the <tbody> and <thead> elements to apply styling. 样式的细微差别是因为Bootstrap依赖于<tbody>和<thead>元素来应用样式。 If you're dynamically creating elements, you need to create these too: 如果您正在动态创建元素，则还需要创建它们：
var thead = document.createElement("thead");
thead.appendChild(headRow);
var tbody = document.createElement("tbody");
tbody.appendChild(dataRow);
Then, instead of appending headRow and dataRow directly, append the newly created elements: 然后，不是直接追加headRow和dataRow ，而是追加新创建的元素：
table.appendChild(thead);
table.appendChild(tbody);
解决方案3
1 2015-08-18 10:22:49
$(function () {
var table = $('<table></table>').attr('id', 'table').addClass('table')
var head = $('<th></th>').html('head')
var data = $('<th></th>').html('data')
var headRow = $('<tr></tr>').append(head)
var dataRow = $('<tr></tr>').append(data)
table.append(headRow)
table.append(dataRow)
console.log(document.styleSheets);
$('#test').append(table);
})
解决方案4
0 2015-08-18 10:03:28
Best way to add style sheet to dynamically added content is to use classList 将样式表添加到动态添加内容的最佳方法是使用classList
Please refer below link: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList 请参考以下链接： https ： //developer.mozilla.org/en-US/docs/Web/API/Element/classList
OR 要么
You can use element.style.cssProperty 您可以使用element.style.cssProperty
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.