0

my style tag has

 <style>
        #armsblue{
            position:absolute;
            left:0.33vw;
            top:-0.3vw;
            z-index: -1; 
        }
        
</style>

the body tag has :

<img src="E:\graphics\torsoblue.png" alt="Girl in a jacket" width="80%" id="torsoblue">
            <img src="E:\graphics\armsblue.png" alt="Girl in a jacket" width="80%" id="armsblue">

the javascript that prints the img dom with armsblue id:

torsos=document.querySelectorAll("#torsoblue,");
console.log(torsos[0].style);

the output comes out as on console :

CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}

when u expand this and check the dictionary has position: "" , zIndex: "" and so on even when i put these values inside the tag.

TonyMontana
  • 261
  • 5
  • 18
  • Yes, inline style object of the element is not the same as CSS defined in a stylesheet. Notice also, that your script "_prints the img dom with __torsoblue__ id_". – Teemu Aug 18 '20 at 08:03
  • Getting all the CSS applied to an element is not a trivial task, take a look at [this post](https://stackoverflow.com/questions/4781410/jquery-how-to-get-all-styles-css-defined-within-internal-external-document-w). – Teemu Aug 18 '20 at 08:11
  • you can retrieve the computed (applied) style with `getComputedStyle` – Greedo Aug 18 '20 at 08:16

1 Answers1

1

In this case you want to access CSS properties from stylesheet which require using window.getComputedStyle otherwise you could use HTMLElement.style if those properties were used inline like in #torsoblue example.

  const torsos = document.querySelectorAll('#torsoblue');
  console.log(torsos[0].style.position);
  console.log(torsos[0].style.left);
  console.log(torsos[0].style.top);
  console.log(torsos[0].style.zIndex);

  const armsblueEl = document.getElementById('armsblue');
  const computedStyle = window.getComputedStyle(armsblueEl);
  console.log(computedStyle.position);
  console.log(computedStyle.left);
  console.log(computedStyle.top);
  console.log(computedStyle.zIndex);
  #armsblue {
    position: absolute;
    left: 0.33vw;
    top: -0.3vw;
    z-index: -1;
  }
<img src="#" alt="Girl in a jacket" width="80%" id="torsoblue"
     style="position: relative;left: 0.66vw;top:-0.6vw;z-index: -2">

<img src="#" alt="Girl in a jacket" width="80%" id="armsblue">
Buczkowski
  • 2,296
  • 12
  • 18