我今天几乎没有开始学习javascript，我正试图通过Surprise按钮将文本“Date”颜色从白色更改为粉红色，但似乎没有任何效果。所有其他按钮工作正常。 （我可以将文本颜色设置为白色w / CSS，dunno如果它阻碍了但粉红色仍然没有发生）。
document.getElementById("button1").addEventListener("click",
function() {
document.getElementById("box").style.height = "400px";
document.getElementById("box").style.width = "400px";
}
);
document.getElementById("button2").addEventListener("click",
function() {
document.getElementById("box").style.backgroundColor = "blue";
}
);
document.getElementById("button3").addEventListener("click",
function() {
document.getElementById("box").style.opacity = ".5";
}
);
document.getElementById("button4").addEventListener("click",
function() {
document.getElementById("box").style.height = "150px";
document.getElementById("box").style.width = "150px";
document.getElementById("box").style.backgroundColor = "orange";
document.getElementById("box").style.opacity = "100";
}
);
document.getElementById("button5").addEventListener("click",
function() {
document.getElementById("Date").style.fontcolor = "pink";
}
);<!DOCTYPE html>
<html>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<title>Jiggle Into JavaScript</title>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>
<br>
<p class="Date">Date</p>
</body>
</html>更改字体颜色的属性是style.color而不是style.fontcolor。而你在document.getElementById('Date')标签中使用p获取日期class是日期而不是Id
document.getElementById("button1").addEventListener("click",
function() {
document.getElementById("box").style.height = "400px";
document.getElementById("box").style.width = "400px";
}
);
document.getElementById("button2").addEventListener("click",
function() {
document.getElementById("box").style.backgroundColor = "blue";
}
);
document.getElementById("button3").addEventListener("click",
function() {
document.getElementById("box").style.opacity = ".5";
}
);
document.getElementById("button4").addEventListener("click",
function() {
document.getElementById("box").style.height = "150px";
document.getElementById("box").style.width = "150px";
document.getElementById("box").style.backgroundColor = "orange";
document.getElementById("box").style.opacity = "100";
}
);
document.getElementById("button5").addEventListener("click",
function() {
document.getElementById("Date").style.color = "pink";
}
);<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<title>Jiggle Into JavaScript</title>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<button id="button5">Surprise</button>
<br>
<p id="Date">Date</p>
</body>
</html>使用style.color而不是style.fontColor。
document.getElementById('Date').style.color = 'pink'