jQuery 尺寸 位置操作

2022-08-02 16:24:14 字數 1324 閱讀 7315

jquery中分別為我們提供了兩套快速獲取和設定元素尺寸和位置的api,方便易用,內容如下。

jquery 尺寸操作包括元素寬高的獲取和設定,且不一樣的api對應不一樣的盒子模型。

語法

**演示

$(function() )

注意:有了這套 api 我們將可以快速獲取和子的寬高,至於其他屬性想要獲取和設定,還要使用 css() 等方法配合。

jquery的位置操作主要有三個: offset()、position()、scrolltop()/scrollleft() , 具體介紹如下:

語法

**演示

返回頂部

$(function() );

// 2. 獲取距離帶有定位父級位置(偏移) position   如果沒有帶有定位的父級,則以文件為準

// 這個方法只能獲取不能設定偏移

console.log($(".son").position());

// $(".son").position();

// 3. 被卷去的頭部

$(document).scrolltop(100);

// 被卷去的頭部 scrolltop() / 被卷去的左側 scrollleft()

// 頁面滾動事件

var boxtop = $(".container").offset().top;

$(window).scroll(function() else

});// 返回頂部

$(".back").click(function() );

// $(document).stop().animate(); 不能是文件而是 html和body元素做動畫

jQuery尺寸和位置操作

1.width height 獲取匹配元素的寬度和高度值,只有width height 2.innerwidth height 獲取包含padding的高度和寬度值 3.outerwidth outheight 獲取包含padding border的寬度和高度值 4.outerwidth true ...

關於jquery的位置以及尺寸操作

關於尺寸操作 1.height 與width 設定或者返回元素的高度與寬度,返回結果是數值型別。設定的時候可以傳入 100px 或者100.eg width 100px width 100 window height 獲取當前螢幕高度,相當於原生的clientheight2.innerwidth 與...

尺寸位置操作

尺寸位置操作 高度和寬度操作 高度操作 height 1 作用 設定 獲取匹配元素的高度值 2 引數 有參 表示設定高度 無參 表示獲取高度 寬度操作 width 1 作用 設定 獲取匹配元素的寬度 2 引數 有參 表示設定寬度 無參 表示獲取寬度 座標值操作 offset 1 作用 獲取 設定元素...