Why do not you give me the style of my e.target element?

Navigation
-1

I do not read the style property of my element when I click, only if I insert the style in the html, if I do it in the css it does not work for me. Thanks 

//// MOUSE EVENTS =>
let body = document.getElementsByTagName('body')[0]; //selecciono todo el body para analizar
let resultado = document.getElementsByTagName('p')[1]; //to print result

body.onclick = procesa;
function procesa(e){ // Por que se le pasa un valor???
  let ejeX   = e.screenX;
  let ejeY   = e.screenY;
  let nodeName = e.target.nodeName; //ver quien desencadeno el evento (e.target daria el objeto)
  let objetivo = e.target;
  let estilo = objetivo.style.width;
  let button = e.button; // left click(0), rigth click(2)=>
  let pulsar = '';
  switch (button) {
    case 0:
    pulsar = 'LEFT'
    break;
    case 2:
    pulsar = 'RIGHT'
    break;
    default:
  }
  let texto = '-You clicked in the ejeX: ' + ejeX + ' y ejeX: ' + ejeY + '<br>';
  texto += '-You clicked in the: ' + nodeName + ' which its object is ' + objetivo + '<br />';
  texto += '-You clicked in the: ' + pulsar + ' button with the value of: ' + button + '<br>'
  texto += '-The width of the element is: ' + estilo;
  resultado.innerHTML = texto;
}


////KEYBOARD EVENTS=>
#section{
  height: 100px;
  width: 50%;
  border: 1px solid black;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>EVENTS</title>
  </head>
  <body>
    <p></p>
    <section id="section">
      My section
    </section>
    <aside class="aside">
      ASIDE
    </aside>
    <footer>FOOTER
    </footer>
    <p id="result"></p>
    <script src="app.js" charset="utf-8"></script>
  </body>
</html>
    
asked by fran 18.12.2017 в 13:26
source

1 answer

4

Indeed the style property only has the values of styles defined in-line in the style attribute of the HTML tag. Does not include those defined in <style> tags in <head> or in external css files.

To get the full definition of element styles you should use the getComputedStyle method of the object window : 

//// MOUSE EVENTS =>
let body = document.getElementsByTagName('body')[0]; //selecciono todo el body para analizar
let resultado = document.getElementsByTagName('p')[1]; //to print result

body.onclick = procesa;
function procesa(e){ // Por que se le pasa un valor???
  let ejeX   = e.screenX;
  let ejeY   = e.screenY;
  let nodeName = e.target.nodeName; //ver quien desencadeno el evento (e.target daria el objeto)
  let objetivo = e.target;
  let estilo = getComputedStyle(objetivo).width;
  let button = e.button; // left click(0), rigth click(2)=>
  let pulsar = '';
  switch (button) {
    case 0:
    pulsar = 'LEFT'
    break;
    case 2:
    pulsar = 'RIGHT'
    break;
    default:
  }
  let texto = '-You clicked in the ejeX: ' + ejeX + ' y ejeX: ' + ejeY + '<br>';
  texto += '-You clicked in the: ' + nodeName + ' which its object is ' + objetivo + '<br />';
  texto += '-You clicked in the: ' + pulsar + ' button with the value of: ' + button + '<br>'
  texto += '-The width of the element is: ' + estilo;
  resultado.innerHTML = texto;
}


////KEYBOARD EVENTS=>
#section{
  height: 100px;
  width: 50%;
  border: 1px solid black;
}
<p></p>
<section id="section">
  My section
</section>
<aside class="aside">
  ASIDE
</aside>
<footer>FOOTER
</footer>
<p id="result"></p>
    
answered by 18.12.2017 в 13:42
Obtain array repeats Eloquent query