前端基礎-JQuery操做樣式

第6章 JQuery操做樣式

6.1 CSS操做

• 功能：設置或者修改樣式，操做的是style屬性。

• 操做單個樣式

// name：須要設置的樣式名稱
// value：對應的樣式值
// $obj.css(name, value);
// 使用案例
$('#one').css('background','gray');// 將背景色修改成灰色

• 設置多個樣式

// 參數是一個對象，對象中包含了須要設置的樣式名和樣式值
// $obj.css(obj);
// 使用案例
$('#one').css({ 
 
   
    'background':'gray',
    'width':'400px',
    'height':'200px'
});

• 獲取樣式

// name:須要獲取的樣式名稱
// $obj.css(name);
// 案例
$('div').css('background-color');

注意：獲取樣式操做只會返回第一個元素對應的樣式值。

6.2 jQuery尺寸和位置操做

6.2.1 width方法與height方法

• 設置或者獲取高度，不包括內邊距、邊框和外邊距

// 帶參數表示設置高度
$('img').height(200);
// 不帶參數獲取高度
$('img').height();

獲取網頁的可視區寬高

// 獲取可視區寬度
$(window).width();
// 獲取可視區高度
$(window).height();

6.2.2 innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight()	方法返回元素的寬度/高度（包括內邊距）。
outerWidth()/outerHeight()  方法返回元素的寬度/高度（包括內邊距和邊框）。
outerWidth(true)/outerHeight(true)  方法返回元素的寬度/高度（包括內邊距、邊框和外邊距）。

6.2.3 scrollTop與scrollLeft

• 設置或者獲取垂直滾動條的位置

// 獲取頁面被捲曲的高度
$(window).scrollTop();
// 獲取頁面被捲曲的寬度
$(window).scrollLeft();

6.2.4 offset方法與position方法

• offset方法獲取元素距離document的位置，position方法獲取的是元素距離有定位的父元素(offsetParent)的位置。

// 獲取元素距離document的位置,返回值爲對象：{left:100, top:100}
$(selector).offset();
// 獲取相對於其最近的有定位的父元素的位置。
$(selector).position();

本文同步分享在 博客「cwl_java」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。