Get the value of transform offset by regularization


Offsetwidth gets the width of the element
Offsetleft gets the element positioning offset value
When an element is offset by transform (translatex: 100px) in CSS3, offset left cannot be used to get the offset value
terms of settlement:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
            width: 200px;
            height: 200px;
            background-color: red;
<div class="box">
< button class = "BTN" > button < / button >
< button class = "btn2" > button 2 < / button >
    var box = document.querySelector(".box");
    var boxwidth = box.offsetWidth;
    console.log(boxwidth); //  The width of the box is 200
    var btn = document.querySelector(".btn");
    var btn2 = document.querySelector(".btn2");
    //Click the button to move the box. A negative value means that the amount of left movement is 100
    btn.onclick = function () { = "translateX(-100px)"; = "translateX(-100px)";
    //Click button 2 to print out the moving value
    btn2.onclick = function () {
        console.log(box.offsetLeft); //  The default offset is 8
        var x = ||;
        console.log(x); // translateX(-100px)
        var reg = /(translateX\(-)(\d+)(px\))/; //  There is a regular difference between left shift and right shift- 
        var result = reg.exec(x)[2]; 
        console.log(result); //  Get the moving value of 100 through regularization