对于原型网站，我已经下载了免费的引导程序模板，该模板可以在以下网站上找到：http://themes.3rdwavemedia.com/demo/prettydocs/index.html
正如您在模板的索引页面上看到的那样，六个项目框的大小都是相同的，尽管它们的内容很长。如果使用Firebug检查DOM，我们可以看到每个项目框都定义为div：
<div class="item item-green col-md-4 col-sm-6 col-xs-6">
<div class=item-inner" style="height: 237px;">
...
</div>
</div>
现在，当我编辑使用模板包下载的index.html页面时，我看到那些项div没有预定义的高度。该属性似乎是在页面加载后添加的。
我要做的是根据参数使列表动态化。根据此参数的值，可能会有2、3、7、15个框，每个框都有特定的图标，颜色，标题，内容和链接。
在index.html文件中，我添加了以下链接到个人Javascript文件的onLoad方法：
<body class="landing-page" onload="addItemBoxes()">
然后，在我的Javascript文件中，我有一些功能来定义要添加的框的列表，然后使用循环调用如下函数：
function addBox(boxId) {
var boxDetails = getBoxDetails(boxId);
/*
Example of boxDetails content :
{
boxId : "1",
boxTitle : "Cars",
boxDescription : "This is a page that talks about cars",
boxIcon : "fa-automobile",
boxIconSource : "font-awesome",
boxLink : "cars.html"
}
*/
if (boxDetails) {
//Main div
var cardsWrapperDiv = document.getElementById("cards-wrapper");
//Get color from the global var
var nbrOfItems = cardsWrapperDiv.getElementsByClassName("item").length;
var nbrOfColors = COLORS.length;
var colorIndex = nbrOfItems % nbrOfColors;
var color = COLORS[colorIndex];
//Create the box
var itemDiv = document.createElement("div");
itemDiv.className = "item " + color + " col-md-4 col-sm-6 col-xs-6";
//Content of the box
var innerItemDiv = document.createElement("div");
innerItemDiv.className = "item-inner";
//Icon
var iconHolderDiv = document.createElement("div");
iconHolderDiv.className = "icon-holder";
if (boxDetails.boxIconSource == 'font-awesome') {
var i = document.createElement("i");
i.className = "icon fa " + boxDetails.boxIcon;
iconHolderDiv.appendChild(i);
} else if (boxDetails.boxIconSource == 'elegant_font') {
var iconSpan = document.createElement("span");
iconSpan.setAttribute("aria-hidden", "true");
iconSpan.className = "icon " + boxDetails.boxIcon;
iconHolderDiv.appendChild(iconSpan);
} else {
console.log("No icon!");
}
innerItemDiv.appendChild(iconHolderDiv);
//Title
var h3 = document.createElement("h3");
h3.className = "title";
h3.innerText = boxDetails.boxTitle;
innerItemDiv.appendChild(h3);
//Description
var p = document.createElement("p");
p.className = "intro";
p.innerText = boxDetails.boxDescription;
innerItemDiv.appendChild(p);
//Link
var a = document.createElement("a");
a.className = "link";
a.href = boxDetails.boxLink;
var span = document.createElement("span");
a.appendChild(span);
innerItemDiv.appendChild(a);
itemDiv.appendChild(innerItemDiv);
cardsWrapperDiv.appendChild(itemDiv);
}
}
该代码工作正常，但没有为框指定样式高度。当我用Firebug检查它们时，我看到它们的定义，例如：
<div class="item item-green col-md-4 col-sm-6 col-xs-6">
<div class=item-inner">
...
</div>
</div>
因此，它们的高度取决于内容的长度，这一点都不漂亮。
我怀疑高度是由index.html代码底部引用的脚本之一分配的：
<script type="text/javascript" src="assets/plugins/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-match-height/jquery.matchHeight-min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
但是我不知道如何称呼他们，以便解决身高问题。非常感谢您的帮助！
最佳答案
如果要使用javascript将样式添加到div中，可以使用：
//Content of the box
var innerItemDiv = document.createElement("div");
innerItemDiv.className = "item-inner";
innerItemDiv.style.height="237px"; // This is the line to add
没有测试代码，但我认为它应该工作。