js获取精确宽度/高度(带小数位像素)
生活随笔
收集整理的這篇文章主要介紹了
js获取精确宽度/高度(带小数位像素)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
問題：用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的精確值，還有元素的文檔中的位置。這個函數在頁面滾動到固定元素提供很好的方案，需要的可以自己試一試。
總結
以上是生活随笔為你收集整理的js获取精确宽度/高度(带小数位像素)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BootStrap笔记-按钮相关
- 下一篇： vue中rules校验是验证首字符_小白