Changing CSS with JavaScript

Contact Us or call 1-877-932-8228
Changing CSS with JavaScript

Changing CSS with JavaScript

Throughout this course we've changed the style of a DOM element with JavaScript - setting the background color of the page, say, or altering the text color of an element. Typically, we use the following syntax:

element.style.cssproperty = 'cssvalue';

where element might be a DOM element gotten from its id (via getElementById()), cssproperty something like color (to set the text color), and cssvalue something like red. We can both get and set any styles for most any element.

Each CSS property has a corresponding property of the JavaScript style object:

  • If the CSS property is a simple word (e.g., color) then the JavaScript property is the same (e.g., style.color).
  • If the CSS property has a dash in it (e.g., background-color) then the JavaScript property uses lower camel case (e.g., style.backgroundColor).

The style object is a collection of an element's styles that are either defined within that HTML element's style attribute or directly in JavaScript. Styles defined in the <style> tag or in an external style sheet are not part of the style object.

The W3C specifies a method for getting at the current (or actual) style of an object: the window object's getComputedStyle() method.

window.getComputedStyle(Element)

Note that the reference to window can be excluded as window is the implicit object. For example:

var div = document.getElementById("divTitle");
var computedStyle = getComputedStyle(div);
alert(computedStyle.fontWeight);
var curStyle = getComputedStyle(div);
alert(curStyle.fontWeight);

Using this method - with getComputedStyle(), as opposed to element.style - we can get for any element the styles set with inline CSS, from CSS in the head of the page, or in an external stylesheet. Furthermore, as the name of the method getComputedStyle() suggests, these are computed (calculated) styles: whereas element.style just gives us style info as set in CSS, getComputedStyle() gives us the real-time calculated CSS.

Let's take a look at a simple example to make this more clear.

Code Sample:

CSSObjectModel/Demos/styles.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Styles</title>
<link href="customstyles.css" rel="stylesheet">
<script>
	window.onload = function() {
		document.getElementById("getstyles").addEventListener("click", function() {
			var pgraph = document.getElementById("pgraph");
			var styleString = "Styles\n";
			styleString += 'color: ' + pgraph.style.color + "\n";
			styleString += 'margin: ' + pgraph.style.margin + "\n";
			styleString += 'padding: ' + pgraph.style.padding + "\n";
			styleString += 'border: ' + pgraph.style.borderBottom + "\n";
			styleString += 'width: ' + pgraph.style.width + "\n";
			alert(styleString);

			            var computedStyle = getComputedStyle(pgraph);
			var computedStyleString = "Computed Styles\n";
			computedStyleString += 'color: ' + computedStyle.color + "\n";
			computedStyleString += 'margin: ' + computedStyle.margin + "\n";
			computedStyleString += 'padding: ' + computedStyle.padding + "\n";
			computedStyleString += 'border: ' + computedStyle.borderBottom + "\n";
			computedStyleString += 'width: ' + computedStyle.width + "\n";
			alert(computedStyleString);
			return false;
		});
		document.getElementById("setstyles").addEventListener("click", function() {
			var pgraph = document.getElementById("pgraph");
			pgraph.style.borderBottom = 'none';
			pgraph.style.fontStyle = 'normal';
			pgraph.style.width = 'auto';
			pgraph.style.padding = 'auto';
			pgraph.style.margin = 'auto';
			return false;
		});
	}
</script>
<style>
	#pgraph {
		border-bottom:2px solid blue;
		width:80%;
		padding:10px;
	}
</style>
</head>
<body>
<h1>Styles</h1>
<p id="pgraph" style="margin:10px auto 30px auto">This is a paragraph</p>
<button id="getstyles">Get Styles</button>
<button id="setstyles">Set Styles</button>
</body>
</html>

Code Explanation

The paragraph, with id pgraph, has CSS styles set in three different ways: inline (margin), in the head of the page (border-bottom, width, and padding), and from an external stylesheet customstyles.css (font-size, color, and font-style).

Clicking the "Get Styles" button invokes a handler which pops up two JavaScript alerts. The first lists the styles retrieved pgraph.style; note that color, padding, border, and width are all blank. The second alert, however, displays style information retrieved from getComputedStyle(pgraph); note that all of the style information - regardless of whether it was added inline, in the head of the page, or from the external stylesheet, is displayed.

The "Set Styles" button, when clicked, changes the styles of the paragraph. Check out how the two methods of getting the styles differ when you click "Get Styles" after setting the styles.

Next