CSS Getting started with CSS Changing CSS with JavaScript


Example

Pure JavaScript

It's possible to add, remove or change CSS property values with JavaScript through an element's style property.

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';

Note that style properties are named in lower camel case style. In the example you see that the css property font-family becomes fontFamily in javascript.

As an alternative to working directly on elements, you can create a <style> or <link> element in JavaScript and append it to the <body> or <head> of the HTML document.

jQuery

Modifying CSS properties with jQuery is even simpler.

$('#element').css('margin', '5px');

If you need to change more than one style rule:

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});

jQuery includes two ways to change css rules that have hyphens in them (i.e. font-size). You can put them in quotes or camel-case the style rule name.

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});

See also