To get css property value with JavaScript you can use the getComputedStyle() method. It 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, a button to get the CSS color and background-color properties value of a specified HTML element (JavaScript converts color code in RGB format).
<!doctype html>
<html>
<head>
<title>title</title>
<style>
#div1 {
 width: 80%;
 height: 2.5em;
 margin: 1em;
 background-color: #02ed03;
 color: #0001da;
}
</style>
</head>
<body>
<h4>example getComputedStyle()</h4>

<div id='div1'>https://coursesweb.net/javascript/</div>
<button id='btn1'>Test</button>
<script>
// 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>
• The getComputedStyle() method uses property name in camelCase, if you want to use property name as it is in CSS, apply the getPropertyValue() method.
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>
<head>
<title>title</title>
<style>
#div1 {
 width: 80%;
 height: 2.5em;
 margin: 1em;
 background-color: #02ed03;
 color: #0001da;
}
</style>
</head>
<body>
<h4>example getPropertyValue</h4>

<div id='div1'>https://gamv.eu/jocuri/</div>
<button id='btn1'>Test</button>
<script>
// 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>

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>
#div1 {
 width: 80%;
 height: 2.5em;
 margin: 1em;
 background-color: #02ed03;
 color: #0001da;
}
</style>
<script src='jquery_library.js'></script>
</head>
<body>
<div id='div1'>http://www.coursesweb.net/jquery-course</div>
<button id='btn1'>Test</button>
<script>
// 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://coursesweb.net/jquery-course

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Get CSS property value with getComputedStyle ot jQuery

Last accessed pages

  1. array_map and array_search in JavaScript (1395)
  2. Working with HTML attributes in PHP (6701)
  3. XML data from ActionScript to a PHP script (1104)
  4. html2canvas - Save page screenshoot on server (1224)
  5. Laravel Middleware (136)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1976)
  2. Contact page - CoursesWeb (1924)
  3. Tabs effect with CSS (1924)
  4. Insert, Select and Update NULL value in MySQL (1228)
  5. PHP getElementById and getElementsByTagName (723)