Home >Web Front-end >CSS Tutorial >How to Set HTML Element Background Colors using CSS Properties in JavaScript?
Setting HTML Element Background Colors with CSS Properties in JavaScript
When customizing HTML elements with JavaScript, it's essential to manipulate CSS properties effectively. Setting the background color is one such common requirement.
JavaScript Syntax
To set the background color of an HTML element using CSS properties in JavaScript, we convert the dashes from the CSS property to camelCase. For example, "background-color" becomes "backgroundColor."
Example
Consider the following code:
function setColor(element, color) { element.style.backgroundColor = color; } // where el is the concerned element var el = document.getElementById('elementId'); setColor(el, 'green');
In this example, the "setColor" function accepts the element and color as parameters. It sets the background color of the given element ("el") to green.
Explanation
Note:
This method works for any CSS property. Simply convert the CSS property name to camelCase and use it as a JavaScript property of the "style" object.
The above is the detailed content of How to Set HTML Element Background Colors using CSS Properties in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!