How to get a CSS attribute from a tag?

Question

Hello, I need a help. I would like to know how to get values from an html tag using javascript.

such as: take the marginLeft value of an image that was determined by a css file.

I hope I’ve been clear, thank you...

Answer 1

To fetch css properties from the stylesheets (*.css):

var myImg = document.getElementById("my-img");
var marLeft = getComputedStyle(myImg).getPropertyValue("margin-left");
alert(marLeft);

#my-img {
  margin-left: 20px;
}

<img id="my-img" src="https://laravel.com/assets/img/laravel-logo.png">

Note that getComputedStyle() serves to fetch the style of the widget from the external css file ( stylesheets). Here a has comparison between the methods:

var myImg = document.getElementById("my-img");
var marLeft = getComputedStyle(myImg).getPropertyValue("margin-left");
var marTop = myImg.style.marginTop;
alert('margin left (ficheiro externo): ' +marLeft);
alert('margin top (inline): ' +marTop)

#my-img {
  margin-left: 20px;
}

<img id="my-img" style="margin-top:34px;" src="https://laravel.com/assets/img/laravel-logo.png">