改变背景颜色
Changing Background Colours
我目前正在尝试使用该模板更改我所有页面的背景颜色。在我的页脚中,我有一个 html select
元素。我正在尝试使用 JavaScript 让用户选择一种颜色然后更新它。但是它根本没有更新颜色。你能看看我的代码并告诉我我遗漏了什么吗,非常感谢!
HTML:
<form id="frmAccess" onClick="changeBackground()">
<select id="colourSelected" name="backgroundColour">
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="White">White/Default</option>
</select>
<input type="submit" value="Update Colour"/>
</form>
CSS:
.container {
font-family: Verdana, Geneva, sans-serif;
background-color: #FFF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerYellow {
font-family: Verdana, Geneva, sans-serif;
background-color: #FF6;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerGreen {
font-family: Verdana, Geneva, sans-serif;
background-color: #3F9;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerBlue {
font-family: Verdana, Geneva, sans-serif;
background-color: #0CF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerPink {
font-family: Verdana, Geneva, sans-serif;
background-color: #FCF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
JavaScript:
function changeBackground()
{
var selectedColour = document.getElementById('colourSelected').value;
switch(selectedColour)
{
case Yellow: document.getElementById('container').className = "containerYellow";
break;
case Green: document.getElementById('container').className = "containerGreen";
break;
case Blue: document.getElementById('container').className = "containerBlue";
break;
case Pink: document.getElementById('container').className = "containterPink";
break;
case White: document.getElementById('container').className = "container";
}//end switch
}//end function
我们可以使用 prompt
.
将用户的选择存储在变量中
var color = prompt("select a color");
document.body.style.backgroundColor = color;
提交表单时的默认行为是 post 数据。为了防止这种情况,我们需要在表单上调用 event.preventDefault()
。在监听表单元素上的 submit
事件后调用它。
看看代码片段。
var updateColor = document.getElementById("colour-update");
var form = document.getElementById("frmAccess");
form.addEventListener("submit", function(event) {
event.preventDefault();
var select = document.getElementById("colourSelected");
document.body.style.backgroundColor = select.value;
});
<form id="frmAccess" onClick="changeBackground()">
<select id="colourSelected" name="backgroundColour">
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="White">White/Default</option>
</select>
<input type="submit" id="colour-update" value="Update Colour"/>
</form>
这是您的工作代码:
<html>
<body id="container">
<style>
.container {
font-family: Verdana, Geneva, sans-serif;
background-color: #FFF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerYellow {
font-family: Verdana, Geneva, sans-serif;
background-color: #FF6;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerGreen {
font-family: Verdana, Geneva, sans-serif;
background-color: #3F9;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerBlue {
font-family: Verdana, Geneva, sans-serif;
background-color: #0CF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerPink {
font-family: Verdana, Geneva, sans-serif;
background-color: #FCF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
</style>
<select id="colourSelected" name="backgroundColour">
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="White">White/Default</option>
</select>
<input type="button" value="Update Colour" onClick="changeBackground()"/>
<script>
function changeBackground()
{
var selectedColour = document.getElementById('colourSelected').value;
switch(selectedColour)
{
case "Yellow": document.getElementById('container').setAttribute("class","containerYellow");
break;
case "Green": document.getElementById('container').setAttribute("class","containerGreen");
break;
case "Blue": document.getElementById('container').setAttribute("class","containerBlue");
break;
case "Pink": document.getElementById('container').setAttribute("class","containterPink");
break;
case "White": document.getElementById('container').setAttribute("class","container");
}//end switch
}//end function
</script>
</body>
</html>
用十六进制值存储颜色在这里是个好主意。
我希望这是你所期望的:
function changeBackground() {
document.getElementById('container').style.backgroundColor = event.srcElement.value;
}
#container {
font-family: Verdana, Geneva, sans-serif;
background-color: #FFF;
width: 960px;
margin: 0 auto;
padding-top: 0;
height: 100px;
}
<div id="container">
</div>
<form id="frmAccess">
<select id="colourSelected" name="backgroundColour" onchange="changeBackground()">
<option selected disabled="" value="">Please select a color</option>
<option value="#fff400">Yellow</option>
<option value="#09ff00">Green</option>
<option value="#0038ff">Blue</option>
<option value="#ff00f4">Pink</option>
<option value="#ffffff">White/Default</option>
</select>
</form>
我目前正在尝试使用该模板更改我所有页面的背景颜色。在我的页脚中,我有一个 html select
元素。我正在尝试使用 JavaScript 让用户选择一种颜色然后更新它。但是它根本没有更新颜色。你能看看我的代码并告诉我我遗漏了什么吗,非常感谢!
HTML:
<form id="frmAccess" onClick="changeBackground()">
<select id="colourSelected" name="backgroundColour">
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="White">White/Default</option>
</select>
<input type="submit" value="Update Colour"/>
</form>
CSS:
.container {
font-family: Verdana, Geneva, sans-serif;
background-color: #FFF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerYellow {
font-family: Verdana, Geneva, sans-serif;
background-color: #FF6;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerGreen {
font-family: Verdana, Geneva, sans-serif;
background-color: #3F9;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerBlue {
font-family: Verdana, Geneva, sans-serif;
background-color: #0CF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerPink {
font-family: Verdana, Geneva, sans-serif;
background-color: #FCF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
JavaScript:
function changeBackground()
{
var selectedColour = document.getElementById('colourSelected').value;
switch(selectedColour)
{
case Yellow: document.getElementById('container').className = "containerYellow";
break;
case Green: document.getElementById('container').className = "containerGreen";
break;
case Blue: document.getElementById('container').className = "containerBlue";
break;
case Pink: document.getElementById('container').className = "containterPink";
break;
case White: document.getElementById('container').className = "container";
}//end switch
}//end function
我们可以使用 prompt
.
var color = prompt("select a color");
document.body.style.backgroundColor = color;
提交表单时的默认行为是 post 数据。为了防止这种情况,我们需要在表单上调用 event.preventDefault()
。在监听表单元素上的 submit
事件后调用它。
看看代码片段。
var updateColor = document.getElementById("colour-update");
var form = document.getElementById("frmAccess");
form.addEventListener("submit", function(event) {
event.preventDefault();
var select = document.getElementById("colourSelected");
document.body.style.backgroundColor = select.value;
});
<form id="frmAccess" onClick="changeBackground()">
<select id="colourSelected" name="backgroundColour">
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="White">White/Default</option>
</select>
<input type="submit" id="colour-update" value="Update Colour"/>
</form>
这是您的工作代码:
<html>
<body id="container">
<style>
.container {
font-family: Verdana, Geneva, sans-serif;
background-color: #FFF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerYellow {
font-family: Verdana, Geneva, sans-serif;
background-color: #FF6;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerGreen {
font-family: Verdana, Geneva, sans-serif;
background-color: #3F9;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerBlue {
font-family: Verdana, Geneva, sans-serif;
background-color: #0CF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
.containerPink {
font-family: Verdana, Geneva, sans-serif;
background-color: #FCF;
width: 960px;
margin: 0 auto;
padding-top: 0;
}
</style>
<select id="colourSelected" name="backgroundColour">
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="White">White/Default</option>
</select>
<input type="button" value="Update Colour" onClick="changeBackground()"/>
<script>
function changeBackground()
{
var selectedColour = document.getElementById('colourSelected').value;
switch(selectedColour)
{
case "Yellow": document.getElementById('container').setAttribute("class","containerYellow");
break;
case "Green": document.getElementById('container').setAttribute("class","containerGreen");
break;
case "Blue": document.getElementById('container').setAttribute("class","containerBlue");
break;
case "Pink": document.getElementById('container').setAttribute("class","containterPink");
break;
case "White": document.getElementById('container').setAttribute("class","container");
}//end switch
}//end function
</script>
</body>
</html>
用十六进制值存储颜色在这里是个好主意。 我希望这是你所期望的:
function changeBackground() {
document.getElementById('container').style.backgroundColor = event.srcElement.value;
}
#container {
font-family: Verdana, Geneva, sans-serif;
background-color: #FFF;
width: 960px;
margin: 0 auto;
padding-top: 0;
height: 100px;
}
<div id="container">
</div>
<form id="frmAccess">
<select id="colourSelected" name="backgroundColour" onchange="changeBackground()">
<option selected disabled="" value="">Please select a color</option>
<option value="#fff400">Yellow</option>
<option value="#09ff00">Green</option>
<option value="#0038ff">Blue</option>
<option value="#ff00f4">Pink</option>
<option value="#ffffff">White/Default</option>
</select>
</form>