問題：用jquery獲取div等塊級元素的寬高時不能精確獲取，只能得到整數部分像素，不能獲取小數位px。請看下面事故：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<span id="test" style="display: inline-block;">測試 Test!</span>
<script src="jquery.min.js"></script>
<script>
console.log($("#test").width());
</script>
</body>
</html>結果是：
這是span實際的寬度73.36px，而控制檯打印出來的結果是下面這張圖:
jquery獲取的寬度只有73px !!!
既然jquery不能精確獲取寬度，那原生js可以嗎？使用document.getElementById("test").style.width 可以嗎，肯定是不行的，這個方法只能獲取css內聯樣式表裏定義好的樣式，這裏span的內容是不固定的，所以這個方法不行。
解決方法1
window.getComputedStyle()
使用方法：window.getComputedStyle(element)
這個方法是js裏提供元素屬性最全的方法，裏面包含幾百個屬性，我們把它在控制檯打印出來console.log(window.getComputedStyle(document.getElementById("test")));
打印出來的是一個對象，在最後我們看到width屬性爲73.3594px，比瀏覽器解析的還精確。
解決方法2
getBoundingClientRect()
使用方法：element.getBoundingClientRect()
我們直接在控制檯打印：$("#test")[0].getBoundingClientRect()，結果如圖：
這裏我們看到，不僅有width,height的精確值，還有元素的文檔中的位置。這個函數在頁面滾動到固定元素提供很好的方案，需要的可以自己試一試。
