Javascript Course


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 HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";

S H A R E

Sharing Twitter

Last accessed pages

  1. Mysql SELECT JOIN tables on two different Databases (4530)
  2. Create simple Website with PHP (44168)
  3. Centering lines of Text, Block or Image (871)
  4. Calling Function and Class Method with Name from String (5945)
  5. Read Excel file data in PHP - PhpExcelReader (97558)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (316)
  2. CSS cursor property - Custom Cursors (46)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (35)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP Unzipper - Extract Zip, Rar Archives (34)