Javascript - Function that returns value from a CSS property

Question

Good evening (good morning or good afternoon) to all!

I need a function that returns the value of a css property. Follow my code:

CSS:

.teste{
    opacity: 0;
    display: none;
}

Javascript:

function funcao(){
 var elemento = document.getElementById("teste");
  function css(el, estilo){
     alert(document.defaultView.getComputedStyle(el, null).estilo);
  }
    css(elemento, "display");
}

However this returns "Undefined", so I did the function with only 1 parameter, below:

Javascript:

function funcao(){
 var elemento = document.getElementById("teste");
  function css(el){
     alert(document.defaultView.getComputedStyle(el, null).display);
  }
    css(elemento);
}

In this case it returns "None". The problem is that I will need to fetch the value of various properties of various classes, so the css(el, style) function would be perfect (if it worked and returned the "None" in the example), so I could use, for example:

css(teste, display);
css(teste, visibility);
css(testeDois, display);

The css() function only has the "Alert" for me to test what it returns, in the end, when it is working it will not have the "Alert", it will just return the value of the class property

I thank you all, from now on, I hope I have managed to be clear on my problem

Thank you very much!!!

Answer 1

You can pass the style between brackets [estilo]:

var elemento = document.getElementById("teste");

function css(el, estilo){
   console.log(estilo+':', document.defaultView.getComputedStyle(el, null)[estilo]);
}

css(elemento, "display");
css(elemento, "width");

.teste {
  width: 10px;
  display: none;
}

<div id="teste" class="teste">

Even if it is an object, javascript allows you to access the property by passing it in brackets instead of using .

Answer 2

I would like to thank everyone for the huge help you have given me, both the Square Bracket solution and the Square solution have solved my problem perfectly well. It was great to have received two different solutions, both contributed positively to my knowledge. Thank you to everyone!!! D

Answer 3

I think I understand what you want. Have you tried using Eval? The Eval aims to transform your "String" into interpretable code to the browser. Therefore, it follows the adapted code:

function funcao(){
 var elemento = document.getElementById("teste");
  function css(el, estilo){
     alert(eval("document.defaultView.getComputedStyle(el, null)." + estilo));
  }
    css(elemento, "display");
}