js獲取精確寬度 高度 帶小數字的畫素

2021-09-28 12:07:36 字數 1708 閱讀 6897

解決方法:window.getcomputedstyle()、getboundingclientrect()

問題:1、用jquery獲取div等塊級元素的寬高時不能精確獲取,只能得到整數部分畫素,不能獲取小數字px。

2、按750開發, iphone 8 plus 渲染元素後實際寬高會有小數點,clientheight,只能得到整數部分畫素

請看下面事故:

測試 test!span

>

src=

"jquery.min.js"

>

script

>

>

console.

log($(

"#test").

width()

);script

>

body

>

html

>

結果是:

這是span實際的寬度73.36px,而控制台列印出來的結果是下面這張圖:

jquery獲取的寬度只有73px !!!

既然jquery不能精確獲取寬度,那原生js可以嗎?使用document.getelementbyid("test").style.width可以嗎,肯定是不行的,這個方法只能獲取css內聯樣式表裡定義好的樣式,這裡span的內容是不固定的,所以這個方法不行。

使用方法:window.getcomputedstyle(element)

這個方法是js裡提供元素屬性最全的方法,裡面包含幾百個屬性,我們把它在控制台列印出來console.log(window.getcomputedstyle(document.getelementbyid("test")));

列印出來的是乙個物件,在最後我們看到width屬性為73.3594px,比瀏覽器解析的還精確。

使用方法:element.getboundingclientrect()

我們直接在控制台列印:$("#test")[0].getboundingclientrect(),結果如圖:

這裡我們看到,不僅有width,height的精確值,還有元素的文件中的位置。這個函式在頁面滾動到固定元素提供很好的方案,需要的可以自己試一試。

js金額標準格式化(可指定精確小數字)

js金額標準格式化 可指定精確小數字,精度位數超出會四捨五入哦 格式化金額 param strdata param n保留幾位小數 function formatamount strdata,n d d d d d d var result currencyandamountregexp.test ...

js獲取Html元素的實際寬度高度

第一種情況就是寬高都寫在樣式表裡,就比如 div1。這中情況通過 div1.style.width拿不到寬度,而通過 div1.offsetwidth才可以獲取到寬度。第二種情況就是寬和高是寫在行內中,比如style width 120px 這中情況通過上述2個方法都能拿到寬度。小結,因為id.of...

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...