js获取精确宽度/高度(带小数位像素)
問題：用jquery獲取div等塊級(jí)元素的寬高時(shí)不能精確獲取，只能得到整數(shù)部分像素，不能獲取小數(shù)位px。請(qǐng)看下面事故：
<!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;">測(cè)試 Test!</span><script src="jquery.min.js"></script><script>console.log($("#test").width());</script> </body> </html>結(jié)果是：
這是span實(shí)際的寬度73.36px，而控制臺(tái)打印出來的結(jié)果是下面這張圖:
jquery獲取的寬度只有73px !!!
既然jquery不能精確獲取寬度，那原生js可以嗎？使用document.getElementById("test").style.width 可以嗎，肯定是不行的，這個(gè)方法只能獲取css內(nèi)聯(lián)樣式表里定義好的樣式，這里span的內(nèi)容是不固定的，所以這個(gè)方法不行。
解決方法1
window.getComputedStyle()
使用方法：window.getComputedStyle(element)
這個(gè)方法是js里提供元素屬性最全的方法，里面包含幾百個(gè)屬性，我們把它在控制臺(tái)打印出來console.log(window.getComputedStyle(document.getElementById("test")));
打印出來的是一個(gè)對(duì)象，在最后我們看到width屬性為73.3594px，比瀏覽器解析的還精確。
解決方法2
getBoundingClientRect()
使用方法：element.getBoundingClientRect()
我們直接在控制臺(tái)打印：$("#test")[0].getBoundingClientRect()，結(jié)果如圖：
這里我們看到，不僅有width,height的精確值，還有元素的文檔中的位置。這個(gè)函數(shù)在頁面滾動(dòng)到固定元素提供很好的方案，需要的可以自己試一試。
總結(jié)
以上是生活随笔為你收集整理的js获取精确宽度/高度(带小数位像素)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BootStrap笔记-按钮相关
- 下一篇： vue中rules校验是验证首字符_小白