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:
<!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>
getComputedStyle() method uses property name in camelCase, if you want to use property name as it is in CSS, apply the getPropertyValue() method.
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>
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:
<div>Web Programming and Development</div>
h2 {
text-decoration: underline;
}function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea")); $nr_food = count($food, 1); echo $nr_food; // 6