jQuery CSS 樣式：css() 與 scrollTop()

讀取與設定元素的 CSS 相關樣式，屬於 jQuery DOM 操作 的一環。

css()

讀取

取得指定元素的 CSS 樣式。讀到的是元素當下實際套用的計算值，因此就算樣式寫在外部 CSS 檔裡也讀得到。

css(property);

參數

功能	說明	型別	範例	備註
property	屬性	String	'color'	必填

範例

HTML

<div id="Dom" style="display: inline">DOM</div>

JavaScript

const val = $('#Dom').css('display');

// inline
console.log(val);

設定一個 CSS 樣式

設定元素的 CSS 行內樣式。

css(property, value);

參數

功能	說明	型別	範例	備註
property	屬性	String	'color'	必填
value	值	String	'#fff'	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').css('color', '#fff');

設定多個 CSS 樣式

一次設定元素的多個 CSS 行內樣式。屬性名以駝峰式書寫，若要保留連字號的寫法，就得用引號包起來。

css(properties);

參數

功能	說明	型別	範例	備註
properties	屬性	Object	{ color: 'red' }	必填

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').css({
  color: '#fff',
  // 'font-size': 30,
  fontSize: '3rem',
});

固定的樣式請交給類別

一整組固定的視覺狀態，建議寫成 CSS 類別再用 addClass() 切換，樣式留在 CSS 檔 裡比較好維護。css() 適合處理必須即時計算出來的數值。

scrollTop()

讀取

取得指定元素被向上捲動的高度，常搭配 scroll 事件 使用。

scrollTop();

Demo

設定

設定指定元素向上捲動的高度。直接設定會瞬間跳過去，想要平滑效果可以改用 animate() 把它當成動畫屬性補間。

scrollTop(value);

參數

功能	說明	型別	範例	備註
value	值	Number	500	必填

範例

JavaScript

// 回到最上方，並加上 400 毫秒的平滑效果
$('html, body').animate({ scrollTop: 0 }, 400);

常見問題

css 讀到的是行內樣式還是計算後的樣式？

讀到的是元素當下實際套用的計算值，因此就算樣式寫在 CSS 檔 裡也讀得到，而且回傳的通常是換算過的絕對值。

屬性名要寫駝峰式還是連字號？

兩種都可以。駝峰式例如：fontSize 可以直接當物件的鍵；保留連字號的寫法時，必須用引號包起來。

設定數值可以不寫單位嗎？

多數長度屬性省略單位時 jQuery 會自動補上像素，但為了語意清楚，建議還是明確寫出 單位 ，尤其是需要用相對單位的時候。

什麼時候不該用 css？

當樣式是固定的一組視覺狀態時，改用 切換類別 會更好維護，樣式仍留在 CSS 檔裡。css() 適合處理必須即時計算出來的數值。

scrollTop 可以做平滑捲動嗎？

直接設定會瞬間跳過去。想要平滑效果，可以對捲動容器使用 animate() ，把 scrollTop 當成動畫屬性補間。

延伸閱讀

CSS 類別HTML 屬性自訂動畫jQuery Events - 瀏覽器事件

參考資料：jQuery API：.css()