Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Why is return transformOrigin nor working?

I have a mini-question concerning the return value of transformOrigin in javascript :
I have a simple div with a transform-origin set to 0 0 via CSS and i’m trying to console.log() the div.style.transformOrigin but I get nothing, not even an error… What am I doing wrong ?

In here link it says "Return the transformOrigin property: object.style.transformOrigin".

That’s what I’m trying to do…

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

 let div_1 = document.querySelector('#div1');

console.log('the transform origin is : ', div_1.style.transformOrigin);
 #div1 {
            width: 100px;
            height: 300px;
            transform-origin: 0 0;
            background-color: red;
        }
 <div id="div1">hello</div>

>Solution :

In the reliable source we can read that:

The style read-only property returns the inline style of an element in the form of a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element’s inline style attribute.

Try using:

getComputedStyle(div_1).getPropertyValue('transform-origin')

element.style works only if you modify it directly, not on the class or id

let div_1 = document.querySelector('#div1');

console.log('the transform origin is : ', getComputedStyle(div_1).getPropertyValue('transform-origin'));
#div1 {
  width: 100px;
  height: 300px;
  transform-origin: 0 0;
  background-color: red;
}
<div id="div1">hello</div>

Sidenote: w3schools isn’t a reliable source of information

let div_1 = document.querySelector('#div1');
div_1.style.transformOrigin = '0 0'

console.log('the transform origin is : ', div_1.style.transformOrigin);
#div1 {
  width: 100px;
  height: 300px;
  background-color: red;
}
<div id="div1">hello</div>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading