Get CSS property value with jQuery

To get css property value with JavaScript you can use the getComputedStyle() function. Returns an object with the final used values of all the CSS properties of an element.

Syntax:
var style = window.getComputedStyle(elm, pseudoElt).propertyName;
- elm - The Element for which to get the computed style.
- pseudoElt - A string specifying the pseudo-element to match. Must be ommited (or null) for regular elements (The second argument, pseudoElt, is not supported in Internet Explorer and Opera browsers).
- propertyName - is the css property, in camelCase (e.g.: width, backgroundColor, fontSize, etc.).

Example, when click on a button, gets the CSS color and background-color properties value of a specified HTML element (JavaScript converts color code in RGB format).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example getComputedStyle</title>
<style type="text/css">
#div1 {
 width: 80%;
 height: 2.5em;
 margin: 1em;
 background-color: #02ed03;
 color: #0001da;
}
</style>
</head>
<body>
<div id="div1">http://coursesweb.net/javascript/</div>
<button id="btn1">Test</button>
<script type="text/javascript">
// gets and alerts the css properties: color, background-color of the html element with ID pasased in "eid"
function test(eid) {
  var elm = document.getElementById(eid);
  var css_color = window.getComputedStyle(elm, null).color;
  var css_bgcolor = window.getComputedStyle(elm, null).backgroundColor;

  alert('color: '+ css_color +'\n background-color: '+ css_bgcolor);
}

// register onclick event for #btn1, that calls the test() function
if(document.getElementById('btn1')) document.getElementById('btn1').onclick = function() { test('div1');};
</script>
</body>
</html>
Demo:
http://coursesweb.net/javascript/

• The getComputedStyle() function uses property name in camelCase, if you want to use property name as it is in CSS, apply the getPropertyValue() function.
Syntax:
var style = window.getComputedStyle(elm, pseudoElt).getPropertyValue('css-property');
Example, when click on a button, gets the CSS width and margin-top property values of a specified HTML element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example getPropertyValue</title>
<style type="text/css">
#div1 {
 width: 80%;
 height: 2.5em;
 margin: 1em;
 background-color: #02ed03;
 color: #0001da;
}
</style>
</head>
<body>
<div id="div1">http://www.marplo.net/jocuri/</div>
<button id="btn1">Test</button>
<script type="text/javascript">
// gets and alerts the css properties: width, margin-top of the html element with ID pasased in "eid"
function test(eid) {
  var elm = document.getElementById(eid);
  var css_width = window.getComputedStyle(elm, null).getPropertyValue('width');
  var css_mtop = window.getComputedStyle(elm, null).getPropertyValue('margin-top');

  alert('width: '+ css_width +'\n margin-top: '+ css_mtop);
}

// register onclick event for #btn1, that calls the test() function
if(document.getElementById('btn1')) document.getElementById('btn1').onclick = function() { test('div1');};
</script>
</body>
</html>
Demo:
http://www.marplo.net/jocuri/

• The getComputedStyle method is supported in Internet Explorer from version 9. For Internet Explorer before version 9 there is another style object: currentStyle .
Syntax:
var style = element.currentStyle.propertyName;
- propertyName - is the css property, in camelCase (e.g.: width, backgroundColor, fontSize, etc.).

If no value is declared for a style property, the getComputedStyle() method and currentStyle object return the default or the inherited value.


To make the script cross-browsers, you can check if the browser supports getComputedStyle() method, otherwise, apply currentStyle , like in this example.
<div id="elm_id">Some content...</div>
<script type="text/javascript">
// returns an object with the value of some css properties of the html element with ID pasased in "eid"
function getCssValues(eid) {
  var elm = document.getElementById(eid);
  if (window.getComputedStyle) {
    var cssValues = {
      'width': window.getComputedStyle(elm, '').width,
      'height': window.getComputedStyle(elm, '').height,
      'color': window.getComputedStyle(elm, '').color,
      'backgroundColor': window.getComputedStyle(elm, '').backgroundColor,
      'fontSize': window.getComputedStyle(elm, '').fontSize
    }
  }
  else {
    var cssValues = {
      'width': elm.currentStyle.width,
      'height': elm.currentStyle.height,
      'color': elm.currentStyle.color,
      'backgroundColor': elm.currentStyle.backgroundColor,
      'fontSize': elm.currentStyle.fontSize
    }
  }

  return cssValues;
}

// gets the object with these css values, and alerts the "height"
var cssVals = getCssValues('elm_id');
alert(cssVals.height);
</script>

Get CSS property value with jQuery

To get the css property value with jQuery, use the jQuery css() function.
- Example, when click on a button, gets the CSS height and background-color properties value of a specified HTML element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example jQuery css</title>
<style type="text/css">
#div1 {
 width: 80%;
 height: 2.5em;
 margin: 1em;
 background-color: #02ed03;
 color: #0001da;
}
</style>
<script type="text/javascript" src="jquery_library.js"></script>
</head>
<body>
<div id="div1">http://www.coursesweb.net/jquery-course</div>
<button id="btn1">Test</button>
<script type="text/javascript">
// gets and alerts the css properties: height, background-color of the html element with ID pasased in "eid"
function test(eid) {
  var elm = $('#'+ eid);
  var css_height = elm.css('height');
  var css_bgcolor = elm.css('background-color');

  alert('height: '+ css_height +'\n background-color: '+ css_bgcolor);
}

// register onclick event for #btn1, that calls the test() function
if(document.getElementById('btn1')) document.getElementById('btn1').onclick = function() { test('div1');};
</script>
</body>
</html>
Demo:
http://www.coursesweb.net/jquery-course
Get CSS property value with JavaScript /jQuery

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10

Last accessed pages

  1. Read Excel file data in PHP - PhpExcelReader (27344)
  2. Get and change IFrame content through a JavaScript script created in another IFrame (4836)
  3. Register and show online users and visitors (9770)
  4. PHP Strings (1799)
  5. Download CSS resources (639)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (35597)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (28468)
  3. Read Excel file data in PHP - PhpExcelReader (27344)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (26601)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (23352)