jQuery中height 不能精確計算的問題

2022-05-26 07:30:13 字數 787 閱讀 1281

jquery中關於高度的計算有三個方法:outerheight()、innerheight()、height()

outerheight():獲取元素集合中第乙個元素的當前計算高度值,包括padding,border和選擇性的margin。返回乙個整數(不包含「px」)表示的值 ,或如果在乙個空集合上呼叫該方法,則會返回 null。在.outerheight()計算中總是包含padding-top ,padding-bottom 和 border-top,border-bottom ;如果includemargin引數是true,那麼margin (top 和 bottom)也會被包含。

innerheight():為匹配的元素集合中獲取第乙個元素的當前計算高度值,包括padding,但是不包括border。

height():獲取匹配元素集合中的第乙個元素的當前計算高度值 或 設定每乙個匹配元素的高度值(帶乙個引數)。.css('height')和.height()之間的區別是後者返回乙個沒有單位的數值(例如,400),前者是返回帶有完整單位的字串(例如,400px)。height()總是返回內容寬度,不管cssbox-sizing屬性值,對不可見的元素依然有效。.height('value')設定的容器寬度是根據cssbox-sizing屬性來定的, 將這個屬性值改成border-box,將造成這個函式改變這個容器的outerheight,而不是原來的內容高度。

問題:height()方法不能精確計算到小數點,只能返回整數

解決:.css('height')獲取高度,若要包括padding和border,設定容器的屬性box-sizing為border-box

CSS中詳解height屬性

目錄結構 contents structure hight屬性值型別一覽表 height的 的使用 定義例項 需要注意的 參考文章 value describtion auto 預設length 絕對長度 相對長度 inherit 繼承這裡筆者主要介紹相對長度的用法,關於絕對長度讀者可以參考css尺...

CSS中詳解height屬性

目錄結構 contents structure hight屬性值型別一覽表 height的 的使用 定義例項 需要注意的 參考文章 value describtion auto 預設length 絕對長度 相對長度 inherit 繼承這裡筆者主要介紹相對長度的用法,關於絕對長度讀者可以參考css尺...

CSS中height和min height的區別

做為web前端新人,需要了解height min height的區別 瀏覽器參照基準 firefox,chrome,safari,opera,ie ie6不支援css min height屬性。最小高度的定義 1.元素擁有預設高度 2.當內容超出元素的預設高度時,元素的高度隨內容增加而增加 figu...