change background color of a section and border-bottom color of a header with javascript
Question
I am trying to change the background color of a section and a border-bottom color of a header when a button in corresponding color is clicked. For example when the blue button is clicked I want the background color of the section to change into this color : rgb(203, 223, 242) and the bottom border of the header to change into rgb(225, 255, 255).
I have tried with document.getElementsByTagName('section') and I retrieve the section tag, but after that when I attempt to change the background color with the following piece of code secColor.style.backgroundColor = 'rgb(203, 223, 242)' nothing happens.
Thank you in advance!
Here is part of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>List</title>
<link rel="stylesheet" href="StyleSheet.css"/>
</head>
<body>
<section>
<header>
<form>
<button>₪</button>
<div>
<p>Colors</p>
<button id="blue" onclick="functionBlueSection('rgb(203, 223, 242)'); functionBlueHeader('(225, 255, 255)');"></button>
<button id="red" onclick="functionRedSection(); functionRedHeader();"></button>
<button id="yellow" onclick="functionYellowSection(), functionYellowHeader()"></button>
</div>
</form>
</header>
<ul>
<li>
<a href="#">List item</a>
<ul>
<li>
<a href="#">Sublist item</a>
</li>
<li>
<a href="#">Sublist item</a>
</li>
<li>
<a href="#">Sublist item</a>
</li>
<li>
<a href="#">Sublist item</a>
</li>
</ul>
</li>
</ul>
</section>
<!--Javascript-->
<script type="text/javascript">
function functionBlueSection() {
var secColor = document.getElementsByTagName('section');
secColor.style.backgroundColor = 'rgb(203, 223, 242)';
}
var headColor = document.getElementsByTagName('header');
function functionBlueHeader(){
headColor.style.borderBottom = 'thin solid rgb(225, 255, 255)';
}
</script>
</body>
</html>
1 answers
solution1
0 2014-02-09 19:29:10
Please add jquery to your project add a <script src="" tag, (see the jquery website on how to add) and avoid - inline onClick attributes are not in use anymore.
the following code should help you after inserting jQuery, and chaging the properties to the desired result:
$(document).ready(function () {
$('#red').on("click",function(){
this.css("border","1px solid blue");
this.css("background","yellow");
});
$('#blue').on("click",function(){
this.css("border","1px solid blue");
this.css("background","yellow");
});
$('#yellow').on("click",function(){
this.css("border","1px solid blue");
this.css("background","yellow");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.