jQuery CSS 操作函數
下面列出的這些方法設置或返回元素的 CSS 相關屬性。
| CSS 屬性 | 描述 |
|---|---|
| css() | 設置或返回匹配元素的樣式屬性。 |
| height() | 設置或返回匹配元素的高度。 |
| offset() | 返回第一個匹配元素相對於文檔的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一個匹配元素相對於父元素的位置。 |
| scrollLeft() | 設置或返回匹配元素相對滾動條左側的偏移。 |
| scrollTop() | 設置或返回匹配元素相對滾動條頂部的偏移。 |
| width() | 設置或返回匹配元素的寬度。 |
實例
設置 <div> 元素中滾動條的垂直偏移：
$(".btn1").click(function(){
$("div").scrollLeft(100);
});
定義和用法
scrollTop() 方法返回或設置匹配元素的滾動條的垂直位置。
scroll top offset 指的是滾動條相對於其頂部的偏移。
如果該方法未設置參數，則返回以像素計的相對滾動條頂部的偏移。
語法
$(selector).scrollTop(offset)
| 參數 | 描述 |
|---|---|
| offset | 可選。規定相對滾動條頂部的偏移，以像素計。 |
提示和註釋
註釋：該方法對於可見元素和不可見元素均有效。
註釋：當用於獲取值時，該方法只返回第一個匹配元素的 scroll top offset。
註釋：當用於設置值時，該方法設置所有匹配元素的 scroll top offset。
使用 scrollTop() 方法獲得當前的scroll top offset。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
alert($("div").scrollTop()+" px");
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<button class="btn1">獲得 scrollbar top offset</button>
<p>試着移動滾動條，然後再次點擊按鈕。</p>
</body>
</html>