CSS background color of an HTML element using JavaScript
CSS background color in JavaScript. How can I set the CSS background color of an HTML element using JavaScript? This is a common question. You can do this using various tricks. Today we learn how to set CSS background color in JavaScript.
Process One:- You might find your code is more maintainable if you keep all your styles, etc. in CSS and just set or unset CSS class names in JavaScript. Your CSS would obviously be something like:
Process Two:-
Process One:- You might find your code is more maintainable if you keep all your styles, etc. in CSS and just set or unset CSS class names in JavaScript. Your CSS would obviously be something like:
.bgcolor{background:#ff00aa;}Then in JavaScript:
element.className = element.className === 'bgcolor' ? '' : 'bgcolor';This is valid in most cases, but not in cases where the color (or whatever attribute) is defined in configuration, or user entered, you can't create a CSS class for every possible color
Process Two:-
var element = document.getElementById('element'); element.style.background = '#ddd';Process Three:- Using a little jQuery:
$('#yourid').css('background-color', '#ddd');Process Four:-
document.body.style.backgroundColor = "green"; //javascript $("body").css("background","green"); //jQuery
How to practice tutorials…
- Make a team with your friends (Member should be 4/5).
- Start to practice one tutorial series along with them.
- Don’t try to collect source code. Type the code while watching the tutorial.
- If you face any problem, discuss with team members to solve quickly.