5

Olá, preciso de uma ajuda. Gostaria de saber como pegar valores de uma tag html usando javascript.

como por exemplo: pegar o valor marginLeft de uma imagem que foi determinado por um arquivo css.

espero ter sido claro, obrigado...

3
  • Você usa alguma biblioteca js como jQuery, AngularJS etc..., fica mais facil para te ajudar. Ex: em jquery pode utilizar $("#id-elemento").css("margin-left");
    – claudsan
    Commented 2/08/2016 às 12:10
  • infelizmente não, eu gostaria de saber como fazer com o javascript puro...
    – Drkill32
    Commented 2/08/2016 às 12:12
  • O exemplo do Miguel abaixo esta perfeito.
    – claudsan
    Commented 2/08/2016 às 12:17

1 Resposta 1

6

Para ir buscar propriedades css ao ficheiro de 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">

Nota que getComputedStyle() serve para ir buscar o estilo do elemento ao ficheiro css externo (ficheiro de stylesheets). Aqui uma tem comparação entre os metodos:

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">

3
  • Ótimo exemplo !
    – claudsan
    Commented 2/08/2016 às 12:18
  • Muito Obrigado pela resposta!
    – Drkill32
    Commented 2/08/2016 às 12:22
  • De nada @Drkill32. Enriqueci a resposta mais um pouco. Com uma comparação entre métodos
    – Miguel
    Commented 2/08/2016 às 12:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .