Get CSS property value with getComputedStyle ot jQuery

Get CSS property value with jQuery

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

<<-Drag and Drop with .. -- defineProperty and defineProperties->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag defines the clickable areas inside the image map?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Which CSS property defines what is done if the content in a box is too big for its defined space?

display overflow position

#id {
  overflow: auto;
}

Click on the event which is triggered when the mouse is positioned over an object.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

Indicate the PHP variable that contains data added in URL address after the "?" character.

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Get CSS property value with getComputedStyle ot jQuery

Javascript Course

Get CSS property value with jQuery

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month