returning css property of an element in vanilla JS

Question

In jQuery, the css property of an element, can be returned using methods. One example is the width() method that returns the width of an element, like this:

$('div').click(function() {
    alert($(this).width());
});

However, in vanilla JS, I tried the following code, but it returned null:

document.querySelector('div').onclick = function() {
    alert(this.style.width);
}

How can I make it correct? I hope someone could help me with this.

Did you try https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth ? — Searching, Nov 23 '16 at 04:39

score 4 · Accepted Answer · answered Nov 23 '16 at 04:35

4

Use getComputedStyle to get the width.

Here is a snippet

document.querySelector('div').onclick = function() {
var width = window.getComputedStyle(this,null).getPropertyValue("width");
    alert(width);
}

DEMO

answered Nov 23 '16 at 04:35

brk

48,835
10
56
78

Thank you for sharing your idea – jst16 Nov 25 '16 at 02:17

score 0 · Answer 2 · answered Nov 23 '16 at 04:36

this here points to event object.you can it to the following

window.onload = function() {
  document.querySelector('div').addEventListener('click', function(event) {
    getWidth(event)
  });
}

function getWidth(event) {

  console.log(event.target.style.width);
}

<div style="width:300px">
  hellow
</div>

Hope it helps

score 0 · Answer 3 · edited May 23 '17 at 11:53

Similar question has been asked earlier, How to get an HTML element's style values in javascript?. The ans is as below, the answer also includes a sample code snippet to get css using JavaScript.

The element.style property lets you know only the CSS properties that were defined as inline in that element (programmatically, or defined in the style attribute of the element), you should get the computed style.

returning css property of an element in vanilla JS

3 Answers3