内部CSS不适用于Java Script
内部CSS不适用于Java Script
提问于 2018-08-04 06:23:46
我已经给了背景颜色的f1，f2，f3，f4的样式标签中的宽度是在头部(内部CSS)，但他们不会显示当我运行代码。如果我应用内联CSS，那么它可以工作。我已经过滤了代码，这不是一个完整的代码，但将有助于解决我的问题。
function Coordinates() {
var x;
var y;
x = document.getElementById("mynumber3").value;
y = document.getElementById("mynumber4").value;
if (x > 0 && y > 0) {
document.getElementById("f1").innerHTML = "(" + x + "," + y + ")";
} else if (x < 0 && y > 0) {
document.getElementById("f2").innerHTML = "(" + x + "," + y + ")";
}
}# f1 {
background-color: #CCC;
width: 12%;
height: 12%;
position: fixed
}
# f2 {
background-color: #CCC;
width: 12%;
height: 12%;
}
# f3 {
background-color: #CCC;
width: 12%;
height: 12%;
}
# f4 {
background-color: #CCC;
width: 12%;
height: 12%;
}<html>
<head>
</head>
<body>
<div id="four">
<h1>Quadrant</h1>
<table>
<tr>
<td><label>Enter First Number</label></td>
<td><input type="text" id="mynumber3"></td>
</tr>
<tr>
<td><label>Enter Second Number</label></td>
<td><input type="text" id="mynumber4"></td>
</tr>
</table>
<button onclick="Coordinates()">Go</button>
<div id="f1"></div>
<div id="f2"></div>
<div id="f3"></div>
<div id="f4"></div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-04 06:57:40
# f1、# f2、# f3和# f4不是有效的CSS选择器。删除不必要的空格，它就可以工作了(它应该是#f1、#f2、#f3和#f4)。
function Coordinates() {
var x;
var y;
x = document.getElementById("mynumber3").value;
y = document.getElementById("mynumber4").value;
if (x > 0 && y > 0) {
document.getElementById("f1").innerHTML = "(" + x + "," + y + ")";
} else if (x < 0 && y > 0) {
document.getElementById("f2").innerHTML = "(" + x + "," + y + ")";
}
}#f1 {
background-color: #CCC;
width: 12%;
height: 12%;
position: fixed
}
#f2 {
background-color: #CCC;
width: 12%;
height: 12%;
}
#f3 {
background-color: #CCC;
width: 12%;
height: 12%;
}
#f4 {
background-color: #CCC;
width: 12%;
height: 12%;
}<html>
<head>
</head>
<body>
<div id="four">
<h1>Quadrant</h1>
<table>
<tr>
<td><label>Enter First Number</label></td>
<td><input type="text" id="mynumber3"></td>
</tr>
<tr>
<td><label>Enter Second Number</label></td>
<td><input type="text" id="mynumber4"></td>
</tr>
</table>
<button onclick="Coordinates()">Go</button>
<div id="f1"></div>
<div id="f2"></div>
<div id="f3"></div>
<div id="f4"></div>
</div>
</body>
</html>
带有f2、f3和f4的id的div应该使用类而不是id，因为它们的div是完全相同的(只有带有id f1的div略有不同)。
function Coordinates() {
var x;
var y;
x = document.getElementById("mynumber3").value;
y = document.getElementById("mynumber4").value;
if (x > 0 && y > 0) {
document.getElementById("f1").innerHTML = "(" + x + "," + y + ")";
} else if (x < 0 && y > 0) {
document.getElementById("f2").innerHTML = "(" + x + "," + y + ")";
}
}#f1 {
background-color: #CCC;
width: 12%;
height: 12%;
position: fixed
}
.f {
background-color: #CCC;
width: 12%;
height: 12%;
}<html>
<head>
</head>
<body>
<div id="four">
<h1>Quadrant</h1>
<table>
<tr>
<td><label>Enter First Number</label></td>
<td><input type="text" id="mynumber3"></td>
</tr>
<tr>
<td><label>Enter Second Number</label></td>
<td><input type="text" id="mynumber4"></td>
</tr>
</table>
<button onclick="Coordinates()">Go</button>
<div id="f1"></div>
<div class="f" id="f2"></div>
<div class="f"></div>
<div class="f"></div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51680747
复制相关文章
相似问题