Check transform property from element using javascript

Question

In my css file i say

@media (min-width: 287px) {
    #footer-div
    {
        transform: translateY(93%);
    }
}
@media (min-width: 472px) {
    #footer-div
    {
        transform: translateY(89%);
    }
}

etc... Now in javascript plain i want to get the value that applies. So in this case 93% or 89%. something like :

var stylenow = document.getElementById("footer-div").style.transform...

Could you explain what you are trying to do with it? because it seems like you already know its going to be 93% and if its going to be dynamic why not set it via javascript in the first place? — Nico Shultz
– Nico Shultz, Commented Aug 23, 2021 at 10:03
you can try Element.style.transform but this will give you the whole CSS value — boxdox
– boxdox, Commented Aug 23, 2021 at 10:08

mplungjan · Accepted Answer · 2021-08-23 10:26:28Z

2

You could use DomMatrix/WebKitCSSMatrix

var myElement = document.querySelector('.box');

function getTranslateY() {
  var style = window.getComputedStyle(myElement);
  var matrix = new WebKitCSSMatrix(style.transform);
  console.log('translateY: ', `${matrix.m42}%`);
}

document.querySelector('button').addEventListener('click', getTranslateY);

body {
  display: flex
}

.box {
  height: 100px;
  width: 100px;
  background: teal;
  transform: translateY(92%);
}

<div class="box"></div>
<button type="button">get value</button>

edited Aug 23, 2021 at 10:26

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Aug 23, 2021 at 10:14

Charles Lavalard

2,34111 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Simon Over a year ago

DOMMatrix is the standard name for this.

Collectives™ on Stack Overflow

Check transform property from element using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related