offsetWidth 获取元素宽
offsetLeft 获取元素定位偏移值
当元素使用CSS3中的transform(translateX:100px)偏移时，无法用offsetLeft获取偏移值
解决办法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
<button class="btn">按钮</button>
<button class="btn2">按钮2</button>
<script>
var box = document.querySelector(".box");
var boxwidth = box.offsetWidth;
console.log(boxwidth); // 盒子的宽度 200
var btn = document.querySelector(".btn");
var btn2 = document.querySelector(".btn2");
// 点击按钮让盒子移动 负值表示左移 移动的量为100
btn.onclick = function () {
box.style.transform = "translateX(-100px)";
box.style.webkitTransform = "translateX(-100px)";
};
// 点击按钮2打印出移动的值
btn2.onclick = function () {
console.log(box.offsetLeft); // 默认的偏移量 8
var x = box.style.transform || box.style.webkitTransform;
console.log(x); // translateX(-100px)
var reg = /(translateX\(-)(\d+)(px\))/; // 左移和右移的正则相差一个 -
var result = reg.exec(x)[2];
console.log(result); // 通过正则获取到移动的值 100
}
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。