Why transform-origin property is not working?-CodePudding

I have a mini-question concerning the return value of transform-origin 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...

 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>

CodePudding user response：

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>