Extract Transform Translate values

Benchmark created by Ely De La Cruz on

Preparation HTML

<style>.test-element { transform: translate(99px, 99px); }</style>
<div class="test-element">Test Element</div>
<script>
var element = document.querySelector('.test-element'),
            transformTranslateRegex = /translate\((\d+)(?:px|%|rem|em|pt)\,\s?(\d+)(?:px|%|rem|em|pt)\)/,
transformMatrixRegex = /(\d+)/g;
element.style.transform = 'translate(99px, 99px)';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
element.style.transform with regex
let transformTranslateValues = element.style.transform.match(transformTranslateRegex);
            translateX = transformTranslateValues[1],
            translateY = transformTranslateValues[2];
ready
window.getComputedStyle with regex
let transformMatrix = getComputedStyle(element)['transform'].match(transformMatrixRegex),
            translateX = transformMatrix[4],
            translateY = transformMatrix[5];
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Ely De La Cruz on