1
我是一个初学者编码器，我正在尝试使用Javascript做一个比较表。一旦我把Javascript插入到Javascript中的字符串中，它就不会在产品图像下居中。有些帮助将不胜感激，非常感谢。如何在Javascript中设置表格的样式？
下面是我的HTML，CSS和Javascript
< script type = "text/javascript" >
var features = [];
features['product1'] = "<img src=\"images/product.png\" id=\"productImage\"alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear/5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product2'] = "<img src=\"images/product2.png\" id=\"productImage\"alt=\"product image\"><table><tr><td class=\"rowTitle\">Price</td><td>R12 399</td></tr><tr><td class=\"rowTitle\">Memory</td><td>32/64/128 GB</td></tr><tr><td class=\"rowTitle\">Resolution</td><td>1440 x 2560 pixels</td></tr><tr><td class=\"rowTitle\">Dimensions</td><td>143.4 x 70.5 x 6.8 mm</td></tr><tr><td class=\"rowTitle\">Weight</td><td>138 g (4.87 oz)</td></tr><tr><td class=\"rowTitle\">Pixels</td><td>16 MP Rear/5 MP Front</td></tr><tr><td class=\"rowTitle\">Model Year</td><td>2015</td></tr><tr><td class=\"rowTitle\">Special Features</td><td>Wireless charging</td></tr></table>".replace(/"/g, "");
features['product3'] = "<img src=\"images/product3.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear/5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product4'] = "<img src=\"images/product4.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear/5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product5'] = "<img src=\"images/product5.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear/5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
features['product6'] = "<img src=\"images/product6.png\" alt=\"product image\"><li>R11 799</li><li>16GB</li><li>4.7 Inches</li><li>5.44 Inches x 2.64 Inches x 0.28 Inches</li><li>5.04 oz.</li><li>12 MP Rear/5 MP Front</li><li>2015</li><li>Siri personal assistant</li><br></br>".replace(/"/g, "");
function compareProducts(sel, suffix) {
if (sel.value != "") {
//header
document.getElementById("header" + suffix).className = "selected";
document.getElementById("header" + suffix).innerHTML = sel.options[sel.selectedIndex].text;
//features
document.getElementById("features" + suffix).className = "selected";
document.getElementById("features" + suffix).innerHTML = features[sel.value];
} else { //nothing selected, set to default
//header
document.getElementById("header" + suffix).className = "default";
document.getElementById("header" + suffix).innerHTML = '';
//features
document.getElementById("features" + suffix).className = "default";
document.getElementById("features" + suffix).innerHTML = '';
}
} < /script>@charset "UTF-8";
/* CSS Document */
* {
font-family: aileron;
text-decoration: none;
color: #2A2A2A;
}
.logo {
position: relative;
display: block;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
width: 30%;
text-align: center;
}
.default {
font-style: bold;
color: #262626;
}
.selected {
font-style: normal;
color: black;
}
#form {
position: relative;
display: block;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#vs {
clear: both;
display: inline-block;
position: relative;
width: 20%;
max-width: 20%;
}
#dropDowns {
display: block;
position: relative;
clear: both;
margin-bottom: 4%;
}
.select1 {
margin-left: 20%;
float: left;
clear: right;
}
.select2 {
margin-right: 20%;
float: right;
clear: left;
}
#table {
position: relative;
width: 100%;
max-width: 100%;
top-margin: 6em;
background-color: white;
font-size: 22px;
color: #0c3053;
text-align: center;
font-weight: 600;
border: none;
}
.top-info {
width: 50%;
text-align: center;
}
.features-list li {
font-size: 1.4em;
font-weight: bold;
width: 50%;
padding: 25px 40px;
/*border-color: #e6e6e6;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;*/
overflow: hidden;
border: none;
}
@media only screen and (min-width: 1170px) {
.features-list li {
font-size: 1.6em;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Compare Products</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<link rel="icon" type="images/favicon.png" href="images/favicon.png">
<body>
<div class="logo">
<img src="images/logo.png" alt="Logo" />
</div>
<form id="form">
<div id="dropDowns">
<select class="select1" name="selProduct1" onchange="compareProducts(this, 1);">
<option value="">Select Product</option>
<option value="product1">Apple iPhone 6S</option>
<option value="product2">Sumsung Galaxy S6</option>
<option value="product3">HTC One M9</option>
<option value="product4">Moto X Pure Edition</option>
<option value="product5">Samsung Galaxy Note 5</option>
<option value="product6">Huawei Ascend P8 Lite</option>
</select>
<div id="vs">
<img src="images/vs.png" alt="VS." />
</div>
<select class="select2" name="selProduct2" onchange="compareProducts(this, 2);">
<option value="">Select Product</option>
<option value="product1">Apple iPhone 6S</option>
<option value="product2">Sumsung Galaxy S6</option>
<option value="product3">HTC One M9</option>
<option value="product4">Moto X Pure Edition</option>
<option value="product5">Samsung Galaxy Note 5</option>
<option value="product6">Huawei Ascend P8 Lite</option>
</select>
</div>
<table id="table">
<tr>
<th id="header1" class="default"></th>
<th id="header2" class="default"></th>
</tr>
<tr>
<td id="features1" class="default"></td>
<td id="features2" class="default"></td>
</tr>
</table>
</form>
</body>
</html>
我不建议通过JavaScript构建原始的HTML。如果您确实必须通过JavaScript动态创建HTML，请改为使用document.createElement（）。 – ManoDestra